Đã đăng vào thg 4 24, 2:08 SA 13 phút đọc

5.6K

Tổng quan về Vue3 cho người mới bắt đầu và ưu nhược điểm của Vue3 với dự án của bạn

I. Overview

Một số tính năng mới cần chú ý trong Vue 3

Composition API
Multiple root elements
Suspense
Multiple V-models
Better Reactivity
Teleport
Tuỳ chỉnh css với thành phần động

1. Composition API

Composition API cung cấp một cách trực quan hơn để quản lý reactivity trong application mà không ảnh hưởng tới tổ chức code và khả năng đọc hiểu.
Composition API cho phép ta đóng gói một loạt các method trong life cycle (sử dụng setup).
Component instance chưa được tạo ra khi method setup được thực thi nên this chắc chắn không được làm việc.
Ngoại trừ props ra thì không thể access tới bất cứ properties nào được khai báo trong component, local state, computed properties.
Ví dụ Vue.js Component (Vue2)

<template>
  <div id="app">
    <p>You clicked {{ numOfClicks }} times.</p>
    <button @click="handleClick()">Click me to increment!</button>
  </div>
</template>
  
  <script>
export default {
  name: "App",
  data() {
    return {
      numOfClicks: 0,
    };
  },
  created() {},
  methods: {
    handleClick: function () {
      this.numOfClicks++;
    },
  },
};
</script>

Vue.js sử dụng Composition API với setup() (Vue3)

<template>
  <div id="app">
    <p>You clicked {{ numOfClicks }} times.</p>
    <button @click="handleClick()">Click me to increment!</button>
  </div>
</template>
  
  <script>
import { ref } from "vue";

export default {
  name: "App",
  setup() {
    let numOfClicks = ref(0);

    function handleClick() {
      numOfClicks.value++;
    }

    return {
      handleClick,
      numOfClicks,
    };
  },
};
</script>

2. Multiple root elements

Bắt đầu từ Vue 3 một component có thể có nhiều hơn một node cha.
Trước đây nếu 2 tag p nếu chung trong 1 div phải viết css parent child thì nay đến vue3 sẽ không cần làm điều này.\
Vue.js Component (vue2)

<template>
  <div class="counter">
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

Vue.js Component (vue3)

<template>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</template>

3. Suspense

Suspense là component đặc biệt render nội dung dự phòng thay vì component chính (lúc này chưa có data) cho tới khi điều kiện để render component được xác lập.
Dùng với default và fallback.
Vue.js Component

<template>
  <Suspense>
    <!-- Sau khi đã có response từ API, nội dung template này sẽ render sau. -->
    <template #default>
      <div v-for="item in articleList" :key="item.id">
        <article>
          <h2>{{ item.title }}</h2>
          <p>{{ item.body }}</p>
        </article>
      </div>
    </template>
    <!-- Trước khi có data từ API, nội dung trong template này sẽ tải trước -->
    <template #fallback> Articles loading... </template>
  </Suspense>
</template>
  <script>
import axios from "axios";
export default {
  async setup() {
    let articleList = await axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
        console.log(response);
        return response.data;
      });
    return {
      articleList,
    };
  },
};
</script>

4. Multiple V-models

Vue3 cho phép không giới hạn số lượng v-model trong component thay vì giới hạn 1 component 1 model như ở Vue2.
Vue.js Component

<template>
  <Suspense>
    <!-- Sau khi đã có response từ API, nội dung template này sẽ render sau. -->
    <template #default>
      <div v-for="item in articleList" :key="item.id">
        <article>
          <h2>{{ item.title }}</h2>
          <p>{{ item.body }}</p>
        </article>
      </div>
    </template>
    <!-- Trước khi có data từ API, nội dung trong template này sẽ tải trước -->
    <template #fallback> Articles loading... </template>
  </Suspense>
</template>
  <script>
import axios from "axios";
export default {
  async setup() {
    let articleList = await axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
        console.log(response);
        return response.data;
      });
    return {
      articleList,
    };
  },
};
</script>

5. Better Reactivity

Thêm một mục mới vào một đối tượng hoặc xóa một mục khỏi đối tượng watchers sẽ không được kích hoạt hoặc DOM sẽ được cập nhật.
Trong Vue-3 chúng hoạt động trực tiếp trong setup mà không cần sử dụng watch, methods.
Vue.js Component (vue2)

<template>
  <div class="hello" @click="test">test {{list }} {{ myObj }}</div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      list: [1, 2],
      myObj: { name: "Preetish" }
    };
  },
  watch: {
    list: {
      handler: () => {
        console.log("watcher triggered");
      },
      deep: true
    }
  },
  methods: {
    test() {
      this.list[2] = 4;
      this.myObj.last = "HS";
      delete this.myObj.name;
    }
  }
};
</script>

Vue.js Component (vue3)

<template>
  <div class="hello" @click="test">test {{list }} {{ myObj }}</div>
</template>
<script>
export default {
  setup() {
    let list = ref([1, 2])
    let a = ref(0)
    let myObj = ref({ name: 'Preetish' })
    function myFun() {
      list.value[3] = 3
      myObj.value.last = 'HS'
      delete myObj.value.name
    }
    return { myFun, list, myObj }
  }
}
</script>

6. Teleport

<Teleport> là một thành phần được tích hợp sẵn cho phép chúng ta "chuyển đổi vị trí" một phần của template vào một nút DOM tồn tại bên ngoài cấu trúc của thành phần đó.
Một trường hợp sử dụng chung sẽ là một thành phần có thể tái sử dụng <Modal>, với nhiều trường hợp được hoạt động cùng một lúc ==> <Teleport> có thể gắn kết nội dung của nhiều thành phần vào cùng một phần như VD.
Sử dụng Teleport

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

Kết quả

<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

7. Tuỳ chỉnh css với thành phần động (v-bind in <style>)

Các thẻ SFC <style> hỗ trợ liên kết các giá trị CSS với trạng động bằng cách sử dụng v-bind hàm CSS.
Thuộc tính tùy chỉnh sẽ được áp dụng cho phần tử gốc thông qua các kiểu nội tuyến và được cập nhật khi giá trị gốc bị thay đổi. Hoạt động

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

II. Ưu nhược điểm của Vue3 so với Vue2

1. Ưu điểm của Vue3

Cải thiện tốc độ, giảm mức sử dụng bộ nhớ: Vue3 đã cấu trúc lại kiến trúc và cải tiến lại mã nguồn gốc của mình và viết lại DOM bằng TypeScript.
Cấu hình linh hoạt: Thay vì bị buộc phải luôn tổ chức source code theo các tùy chọn, mã giờ đây có thể được tổ chức thành các chức năng, mỗi chức năng xử lý một tính năng cụ thể.
Cải thiện, đơn giản hóa mã nguồn: một số nâng cấp cải tiến lại source code giúp giảm thiểu các đoạn code dư thừa mà chức năng không đổi.
Thuận lợi cho việc mở rộng và bảo trì: Vue3 được viết lại để tổ chức logic tốt hơn, đóng gói và sử dụng lại, điều này làm cho nó cực kỳ linh hoạt, đồng thời việc theo dõi nguồn của mọi thuộc tính thành phần cũng dễ dàng hơn.
Dễ hiểu và thuận lợi cho việc học tập: Vue3 sử dụng và tận dụng lại các thành phần của JavaScrip gốc để phát triển mã nguồn.

2. Nhược điểm của Vue2

Khi dự án được mở rộng độ phức tạp của mã nguồn lớn khiến việc đọc hiểu trở nên khó khăn và khó bảo trì.
Khả năng tái sử dụng thấp, tính kế thừa chưa cao.
Vue 2 có hỗ trợ TypeScript nhưng vẫn hạn chế trong khung có sẵn.

3. Nhược điểm khi sử dụng Vue3

Cần thêm một khoảng thời gian để làm quen tìm hiểu viết lại các thành phần hiện có
Nếu đang sử dụng một dự án hiện có rất lớn và phức tạp bằng Vue 2: có thể mất rất nhiều thời gian và công sức nhưng không đem lại giá trị quá lớn, tùy thuộc vào mã của bạn, thời gian di chuyển và lợi ích về hiệu suất có thể không đáng giá.

4. Khi nào nên sử dụng Vue2

Khi bạn đang phát triển 1 dự án bằng từ Vue2 có độ phức tạp không quá cao và không gặp vấn đề quá lớn về tốc độ cũng như hiệu xuất
Nếu chưa có đủ kiến thức cũng như nghiên cứu và tìm hiểu kỹ về Vue3
Khi việc nâng cấp dự án cũ từ Vue2 lên Vue3 không tạo ra giá trị quá lớn vì việc nâng cấp có thể phát sinh ra lỗi và khó kiểm soát nó

5. Khi nào nên sử dụng Vue3

Nếu bạn đang gặp phải các vấn đề về hiệu suất, tối ưu hệ thống, mở rộng bảo trì gặp khó khăn
Nếu bạn cần khả năng tương thích TypeScript tốt hơn
Nếu bạn muốn tìm hiểu hoặc bắt đầu xây dựng hệ thống trên nền tảng vuejs

III. Overview nuxt

1. Overview nuxt2

Những điểm nổi bật của nuxt 2 Xây dựng giao diện người dùng (UI rendering), trong trừu tượng hóa việc phân phối giữa client và server. Mục tiêu của Nuxt.js là tạo ra một framework đủ linh hoạt để bạn có thể sử dụng nó làm cơ sở cho project hoặc ngoài project dựa trên Node.js. Nuxt2 được viết tệp trên Vue 2

1.1 Tách mã tự động

Nuxt.js có thể tạo phiên bản tĩnh của trang web của bạn với cấu hình Webpack đặc biệt. Đối với mỗi route (trang) được tạo tĩnh, router cũng sẽ nhận được tệp JavaScript của riêng mình, chỉ với mã cần để chạy tuyến đó. Điều này thực sự có thể giúp với tốc độ vì nó giữ kích thước của tệp JavaScript nhỏ so với toàn bộ kích thước ứng dụng của bạn.

1.2 Dễ dàng thiết lập chuyển tiếp giữa các routers

Vue có phần tử bao bọc <transition> giúp đơn giản hóa việc xử lý hoạt ảnh JavaScript, hoạt hình CSS và chuyển tiếp CSS trên các thành phần hoặc thành phần của bạn. Nuxt.js thiết lập các routers của bạn theo cách mỗi trang được bọc trong một phần tử <transition> để bạn có thể tạo chuyển tiếp giữa các trang một cách đơn giản.

1.3 Mở rộng với kiến trúc Mô-đun

Cấu trúc ứng dụng Nuxt mặc định nhằm cung cấp một điểm khởi đầu tuyệt vời cho cả các ứng dụng nhỏ và lớn. Bạn có thể tự do sắp xếp ứng dụng của mình theo cách bạn muốn và có thể tạo các thư mục khác khi cần thiết.

1.4 Dễ dàng viết các components đơn lẻ

Các thành phần được xác định bằng Vue.component, theo sau là new Vue ({el: '#container'}) để nhắm mục tiêu một phần tử container trong phần thân của mỗi trang vì vậy trong các dự án lớn nó có thể trở nên khó quản lý. Tất cả các vấn đề này được giải quyết bằng single-file components có phần mở rộng .vue. Để sử dụng chúng, bạn phải thiết lập quy trình xây dựng với các công cụ như Webpack và Babel.

1.4 Tự biên dịch ES6/ES7

Bên cạnh Webpack, Nuxt.js cũng được đóng gói sẵn với Babel. Babel xử lý biên dịch các phiên bản JavaScript mới nhất như ES6 và ES7 thành JavaScript có thể chạy trên các trình duyệt cũ hơn.

2. Overview nuxt3

2.1 Tối ưu hóa chung

Về cơ bản nuxt3 vẫn kế thừa từ thiết kế từ nuxt2, phiên bản nuxt3 được sử dụng vue3 nên sẽ được kế thừa các ưu điểm và tối ưu hoá tốt hơn như đã được trình bày ở trên Kch thước gói nhỏ hơn (lõi nhẹ hơn 20% khi so sánh với Nuxt 2) và cải thiện hiệu suất. Công cụ máy chủ Nuxt Nitro mở khóa các khả năng toàn ngăn xếp mới có hiệu xuất tốt hơn.

2.2 Vue 3

Nuxt 3 sẽ dựa trên Vue 3 và cung cấp trải nghiệm phù hợp với phiên bản mới nhất của khung Vue. Điều này có nghĩa là:

Các tiện ích mô-đun mới cho Composition API.
Cải thiện định tuyến với Vue Router 4.
Tìm nạp dữ liệu đã sửa đổi và tích hợp Hồi hộp.

2.3 TypeScript

Tích hợp TypeScript chặt chẽ sẽ cung cấp khả năng kiểm tra kiểu cho toàn bộ cơ sở mã Nuxt 3, cũng như tự động hoàn thành và phát hiện lỗi tốt hơn. Nuxt 3 sử dụng Mô-đun ES (ESM) và TypeScript như những công dân hạng nhất để cải thiện trải nghiệm phát triển. Động thái này phù hợp với những gì Vue 3

2.4 Kinh nghiệm phát triển tốt hơn

Nuxt 3 còn có nhiều cải tiến hơn nữa đối với trải nghiệm phát triển, bao gồm:

Nuxt CLI mới để tích hợp mô-đun và giàn giáo dự án dễ dàng;
Nuxt Devtools để gỡ lỗi nhanh hơn và thoải mái hơn ngay trong trình duyệt;
Bộ công cụ mô-đun tiện ích hiện đại được gọi là Nuxt Kit ;
Tự động nhập cho các tiện ích toàn cầu và các chức năng có thể tổng hợp.

2.5 Động cơ nitro

Nuxt 3 là công cụ máy chủ mới của nó - Nitro . Động cơ này là thứ thúc đẩy nhiều cải tiến hiệu suất và các tính năng mới của Nuxt 3.

2.6 Đầu ra được tối ưu hóa

Một ưu điểm khác của Nitro là đầu ra phổ quát, được tối ưu hóa cao cho thư mục .output mới. Gói máy chủ lõi bây giờ sẽ nhỏ hơn 1 MB và sẽ tăng hiệu suất đáng chú ý. Ví dụ, khởi động nguội sẽ nhanh hơn 75-100 lần! Việc giảm kích thước gói hơn nữa sẽ được thực hiện với cơ chế phân tách mã được sửa đổi.

2.7 Hỗ trợ đa nền tảng

Nuxt 3 sẽ chạy liền mạch trong hầu hết các môi trường JS bao gồm Node.js , Deno , Cloudflare worker ...

IV. Bài viết được tham khảo từ