- vừa được xem lúc

Vue v3.3 có gì hot 🔥

0 0 20

Người đăng: Pate Kem

Theo Viblo Asia

I. Giới thiệu

Hello everyone ✌️, bài viết này mình muốn chia sẻ các thông tin và chức năng mới của phiên bản Vue 3.3

  • <script setup> + TypeScript

    • Imported and Complex Types Support in Macros
    • Generic Components
    • More Ergonomic defineEmits
    • Typed Slots with defineSlots
  • Tính năng thử nghiệm

    • Reactive Props Destructure
    • defineModel
  • Các tính năng đáng chú ý khác

    • defineOptions
    • Better Getter Support with toRef and toValue
    • JSX Import Source Support

II. Nội dung

Phiên bản này tập trung vào các cải tiến về trải nghiệm cho các lập trình viên, cụ thể là SFC <script setup> + Typescript.

Cùng với phiên bản v1.6 của Vue Language Tools (trước đây gọi là Volar) đã giải quyết được nhiều điểm khó khăn tồn tại từ lâu khi sử dụng Vue với TypeScript.

Dependency Updates

  • volar / vue-tsc@^1.6.4
  • vite@^4.3.5
  • @vitejs/plugin-vue@^4.2.0
  • vue-loader@^17.1.0 (if using webpack or vue-cli)

<script setup> + TypeScript

1. Imported and Complex Types Support in Macros

Ở các version < 3.3, các kiểu dữ liệu được định nghĩa cho defineProps hay defineEmits chỉ giới hạn ở các kiểu dữ liệu cục bộ...

// Hoạt động bình thường
<script setup lang="ts">
interface Props { title: string } defineProps<Props>()
</script>
// Xảy ra lỗi
<script setup lang="ts">
import type { Props } from './foo' defineProps<Props>()
</script>

Hạn chế này đã được giải quyết ở version 3.3

<script setup lang="ts">
import type { Props } from './foo' // imported + intersection type
defineProps<Props & { extraProp?: string }>()
</script>

2. Generic Components

Các Components ở phiên bản mới sử dụng <script setup> đã có thể thêm generic type thông qua attribute generic :

Simple T

<script setup lang="ts" generic="T"> defineProps<{ list: T[], modelValue?: T }> defineEmits<{ (e: `update:ModelValue`, a: T): void }>() </script>

Extend types...

<script setup lang="ts" generic="T extends string | number, U extends Item"> import type { Item } from './types'
defineProps<{ id: T list: U[]
}>() </script>

3. More Ergonomic defineEmits

Từ phiên bản v3.3, đã có thêm cách khai báo kiểu dữ liệu cho tham số của defineEmits một cách thuận tiện hơn như sau.

// BEFORE
const emit = defineEmits<{ (e: 'foo', title: string): void (e: 'bar', id: number, ...rest: any[]): void
}>()
// AFTER
const emit = defineEmits<{ foo: [title: string] bar: [id: number, ...rest: any[]]
}>()

4. Typed Slots with defineSlots

Trong Vue v3.3 defineSlots là một phương thức được sử dụng để định nghĩa các nội dung (slot) cần được chèn vào Component trong Vue Composition API.

<script setup lang="ts">
defineSlots<{ default?: (props: { msg: string }) => any item?: (props: { id: number }) => any
}>()
</script>

Tính năng thử nghiệm

1. Reactive Props Destructure

Tính năng này cung cấp cách khai báo giá trị mặc định cho props một cách thuận tiện hơn.

<script setup>
import { watchEffect } from 'vue' const { msg = 'hello' } = defineProps(['msg']) watchEffect(() => { // accessing `msg` in watchers and computed getters // tracks it as a dependency, just like accessing `props.msg` console.log(`msg is: ${msg}`)
})
</script> <template>{{ msg }}</template>

2. defineModel

Đây là một tính năng mình thấy rất hay ở phiên bản lần này.

Ở các phiên bản trước, Vue hỗ trợ two-way binding với v-model bằng cách khai báo propemit để nhận và update cho giá trị đó.

<!-- BEFORE -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
console.log(props.modelValue) function onInput(e) { emit('update:modelValue', e.target.value)
}
</script> <template> <input :value="modelValue" @input="onInput" />
</template>

Nhưng từ version 3.3, chúng ta chỉ cần sử dụng defineModel

defineModel sẽ tự động đăng ký một prop và trả về một tham chiếu có thể thay đổi, cập nhật trực tiếp.

<!-- AFTER -->
<script setup>
const modelValue = defineModel()
console.log(modelValue.value)
</script> <template> <input v-model="modelValue" />
</template>

Các tính năng đáng chú ý khác

Bên cạnh các tính năng mới được giới thiệu ở trên, thì ở phiên bản này tác giả cũng có những thay đổi và cập nhật cho những tính năng đã xuất hiện ở các phiên bản trước.

1. defineOptions

defineOptions cho phép bạn tùy chỉnh các option của Component một cách tường minh và linh hoạt hơn.

import { defineOptions } from 'vue'; const MyComponent = defineOptions({ name: 'MyComponent', props: { message: String }, data() { return { counter: 0 }; }, methods: { increment() { this.counter++; } }, template: ` <div> <p>{{ message }}</p> <button @click="increment">Increment</button> <p>Counter: {{ counter }}</p> </div> `
});

2. Cập nhật toReftoValue

toRef đã được cải tiến để chuẩn hóa các giá trị, getters, refs thành refs

// equivalent to ref(1)
toRef(1) // e.g: Ref<number>
// creates a readonly ref that calls the getter on .value access
toRef(() => props.foo)
// returns existing refs as-is
toRef(existingRef)

Bạn có thể sử dụng toRef để cập nhật lại sự thay đổi giá trị gần tương tự như computed.

Chức năng toValue trong Vue được sử dụng để lấy giá trị hiện tại của một thuộc tính đang theo dõi. Nó có thể được sử dụng trên bất kỳ thuộc tính nào, bao gồm cả thuộc tính được tạo bằng ref hoặc computed.

toValue(1) // --> 1
toValue(ref(1)) // --> 1
toValue(() => 1) // --> 1

toValue có thể sử dụng để thay thế cho unRef

const myRef = ref(0);
console.log(toValue(myRef)); // 0 myRef.value = 1;
console.log(toValue(myRef)); // 1

III. Tổng kết

Đây là những thông tính năng mới về phiên bản VueJS v3.3. Cảm ơn các bạn đã theo dõi bài viết của mình nhé.

Tham khảo

https://vuejs.org/api/reactivity-utilities.html

https://blog.vuejs.org/posts/vue-3-3

Bình luận

Bài viết tương tự

- vừa được xem lúc

Thủ thuật nhỏ để căn chỉnh image với object-fit

Chào các bạn,. Có lẽ trong hành trình code của các bạn thì không ít lần gặp vấn đề méo ảnh do fix cứng cả width, height của ảnh nhỉ? Hoặc kể cả khi bạn set value cho 1 thuộc tính weigth hoặc height còn thuộc tính còn lại để auto thì nhiều lúc ảnh cũng không được hiển thị toàn vẹn cho lắm.

0 0 49

- vừa được xem lúc

Tìm hiểu về CSS framework - Bulma

Mở đầu:. Mấy bữa nay đang lướt web thấy có giới thiệu framework bulma này, được mọi người giới thiệu gọn nhẹ và dễ sử dụng, nên mình mới tìm hiểu thử và hôm nay xin viết 1 bài viết giới thiệu sơ qua với các bạn.

0 0 36

- vừa được xem lúc

Một số mẹo vặt "hay ho" của ES6 có thể bạn chưa biết - Phần 4

Xin chào, ở 3 bài trước của series "Một số mẹo vặt "hay ho" của ES6", mình đã chia sẻ 1 số tips/tricks nhỏ với ES6, hy vọng ít nhiều nó sẽ có ích với các bạn khi áp dụng vào thực tế. Hôm nay, xin mời các bạn theo dõi phần 4 của series này.

0 0 46

- vừa được xem lúc

Tìm hiểu về Jest Mocks Test phía frontend

Giới thiệu. Chắc hẳn không ai phủ nhận rằng UnitTest là 1 phần quan trọng trong giai đoạn phát triển phần mềm, đảm bảo cho code được coverage tránh các bug không mong muốn.

0 0 36

- vừa được xem lúc

Convert từ SVG sang Icon Font như thế nào?

Chào các bạn. Như câu hỏi trên title của bài viết, hôm nay mình sẽ hướng dẫn các bạn cách convert 1 file svg 1 cách khá đơn giản và vô cùng tiện lợi cho các bạn. https://icomoon.io/app/#/select.

0 0 53

- vừa được xem lúc

Một vài thủ thuật làm việc với các dạng layout - Phần 4

. Chào mọi người, cũng đã lâu rồi mình không thấy nhau. Để tiếp tục với series's về các dạng layout hôm nay mình sẽ chia sẻ thêm một trick thú vị nữa về step layout.

0 0 46