Vue2 to Vue3 - Có gì mới?

Published in News

December 13, 2022

3 min read

Từ một thư viện javascript đến một framework, Vue ngày càng phát triển và phổ biến hơn đến với người dùng và đặc biệt là các developer front-end. Bài viết này mình xin giới thiệu ngắn gọn về một số thay đổi mới được thêm vào trong hai phiên bản Vue 3 so với Vue 2.

1. Giới thiệu

Nói một chút về nguồn gốc của framework này thì Vue được tạo ra bởi Evan You – một lập trình viên người Trung Quốc. Và Vue 3 được release chính thức vào 18/09/2020. Hiện tại Vue đang có số lượng star khá lớn ở trên Github là 201k (tính đến thời điểm bài viết này được public), nhiều hơn đối thủ “nặng ký” ReactJS với 199k. Bạn có thể truy cập tại đây: https://github.com/vuejs/vue

2. Các tính năng và sự thay đổi của Vue 3

Evan You đã chia sẻ, Vue 3 nhanh hơn, nhỏ hơn, dễ bảo trì hơn và dễ nhắm mục tiêu bản địa hơn. Và sau đây là một số thay đổi lớn trong Vue 3 sẽ mình sẽ chia sẻ trong bài viết này:

Composition API
Multiple root elements
Suspense
Multiple v-models

2.1 Composition API

Composition API là tính năng nâng cao, thêm vào API hiện tại và đặc biệt là một bộ APIs cấp thấp hơn sử dụng các tính năng của Vue bên ngoài các components. Đối với Vue 2 đang dùng là Options API các logic code sẽ bị phân tán vào các option (data, computed, methods, watch …) - nếu như dự án lớn dần lên, khi muốn thêm một chức năng chúng ta sẽ thấy khó để có thể chọn một chỗ phù hợp viết code. Với Composition API bên trong Vue 3 components sẽ sử dụng *setup()* , các bạn có thể nhìn ví dụ dưới đây:

`export default {
  setup() {
      // Composition API work.
  }
}`

Mọi thứ đều có thể xử lý được trong Composition API, thay vì chia thành các option, chúng ta chỉ cần sử dụng *setup()*, từ đó chúng ta có thể nhóm lại những logic lại với nhau giúp dễ dàng xử lý và đọc hiểu hơn rất nhiều và đặc biệt rất clear code. Đây là bức tranh overview về 2 phiên bản Options API và Composition API:

2.2 Multiple root elements

Trong Vue 2, thẻ mẫu chỉ lấy một phần tử gốc. Chúng ta phải đặt chúng trong một <div> thẻ để nó hoạt động. Vì điều này, chúng ta đã phải thay đổi CSS cũng như trong thành phần chính để nó trông như mong đợi.

`<template>
    <div>
        <button @click="toggleModalState">Open modal</button>
        <p>Hello TDA</p>
    </div>
</template>`

Trong Vue 3, nhờ có tình năng Fragment hạn chế này được dỡ bỏ. Không cần cho một yếu tố gốc nữa. Chúng tôi có thể sử dụng bất kỳ số lượng thẻ trực tiếp:

<template>
    <button @click="toggleModalState">Open modal</button>
    <p>Hello TDA</p>
</template>

2.3 Suspense

Khi làm việc với mô hình API – Client trong Vue thì việc gọi API từ Vue lên server để lấy dữ liệu, chúng ta thực hiện khá nhiều. Và trong trường hợp API chưa trả dữ liệu về hoặc dữ liệu bị lỗi thì chúng ta thường phải check thêm một vài điều kiện (như kiểm tra mảng đang có dữ liệu hay không) để nó hiển thị lên 1 message thông báo chẳng hạn.

<div v-if="list.length > 0"></div>
<div v-if="list.length === 0">No data</div>

Và Vue 3 đã support với tính năng Suspense (Tuy nhiên nó chỉ hỗ trợ nếu bạn sử dụng Async Component thôi):

<template>
  <suspense>
    <template #default>
      <List />
    </template>
    <template #fallback>
      <div>
        No data
      </div>
    </template>
  </suspense>
</template>
 
<script>
export default {
  components: {
    List: defineAsyncComponent(() => import('@/List.vue'))
  }
}
</script>

2.4 Multiple v-models

Khi làm việc với Vue 2, chúng ta đã biết đến v-model, được sử dụng rất nhiều khi tạo form sử dụng trong Vue. Sử dụng v-model là tạo ra các ràng buộc dữ liệu hai chiều trên các ô input hoặc textarea hay thậm chí là file. Nó sẽ tự động chọn đúng cách để cập nhật các phần tử dựa trên kiểu nhập (Two way binding). Tuy nhiên ở Vue 2, lại chỉ cho phép một component chỉ được dùng duy nhất một v-model. Và ở Vue 3 đã cải thiện hơn rất nhiều khi cho phép sử dụng không giới hạn v-model trong một component.

<template>
    <app-form v-model:username="username" v-model:address="address"></app-form>
</template>

//AppForm.vue
<template>
    <div>
        <label>Username: </label>
        <input :value="username" @input="updateUserName($event.target.value)" />
        <label>Address: </label>
        <input :value="address" @input="updateAddress($event.target.value)" />
    </div>
</template>
<script>
export default {
    props: {
        username: String,
        address: String
    },
    setup(props, { emit }){
        const updateUserName = value => {
          emit('update:username', value)
        }
        const updateAddress = value => {
          emit('update:address', value)
        }
        return { updateUserName, updateAddress }
    }
}
</script>

3. Kết luận

Trên đây là một số sự thay đổi tiêu biểu từ Vue 2 sang Vue 3 mà mình đã tóm tắt lại. Hy vọng là sẽ giúp bạn có hứng thú với việc sử dụng 2 phiên bản của Vue (và đặc biệt là Vue3 - cũng rất dễ học và hiểu được nó). Cảm ơn bạn đã đọc hết bài viết này!