Báo cáo về VUEJS môn học các công nghệ lập trình hiện đại

Vue tạo phát triển Evan You ông làm kỹ sư công ty Google Lúc Evan sử dụng Angular cho số dự án khác có phát biểu rằng: “Điều xảy trích phần mà thích Angular xây dựng thêm nhẹ nhàng mà không cần phải ý đến khái niệm bổ sung” Đây phát biểu xem bước đệm giúp cho Vue có mặt thời điểm - Vue phát hành vào đầu năm 2014 dự án tăng tải lên HackerNew, Echo Js ngày mắt 1.3 Lý nên sử dụng Vuejs gì? - Mặc dù đứng thứ danh sách Top Frameworks Frontend 2020 ( Bảng xếp hạng Frameworks Frontend sử dụng nhiều 2020 Vue giữ số Stars cao 158k React đạt 145k Angular 58,4k - Vuejs có cấu trúc thiết kế linh hoạt Nó cho phép ta thiết kế thứ từ đầu thành công việc phát triển dự án khổng lồ - No build step required: Vue không cần sử dụng build tool phức tạp nhiều bước xây dựng ứng dụng, bạn cần khai báo script phát triển ứng dụng Vue - Command line interface: Vue tạo cấu trúc project nhanh chóng nhờ vào command line interface - Đa dạng tài liệu: Hiện nay, nguồn tài liệu Vue ngày đa dạng, rõ ràng ngôn ngữ nên bạn dễ dàng trở thành chuyên gia - Hệ sinh thái vững chắc: Vue sở hữu hệ sinh thái vững đầy đủ nên cung cấp số add-ons hữu ích cho việc xây dựng ứng dụng fontend điển hình Nó bao gồm: vue-router, vuex, vue-testutils, vue-dev-tools, vue-cli,… - Core Vue linh hoạt: Vuejs tập trung vào việc render giao diện cho người dùng tương tác vậy, cung cấp tối thiểu tính cần thiết cho việc thiết kế xây dựng kiến trúc, đồng thời giúp bạn loại bỏ tính khơng cần thiết khỏi thư viện lõi Vue.js đảm bảo cho framework nhỏ gọn mềm dẻo 1.4 - Ưu nhược điểm Vuejs? Vue Frameworks tương đối đơn giản dễ hiểu Nó tốt việc loại bỏ điều phức tạp mà nhà phát triển Angular phải đối mặt Vuejs có kích thước nhỏ cung cấp hai ưu điểm giao trực quan khả tương tác - Vue linh hoạt bạn đa từ việc xây dựng ứng dụng web ứng dụng dành cho thiết bị di động đến ứng dụng web thơng minh, xử lý dễ dàng quy trình đơn giản nhanh chóng - Mặc dù xây dựng để tối ưu hóa hiệu suất ứng dụng giải vấn đề phức tạp, Vuejs không hãng công nghệ khổng lồ thị trường sử dụng Tuy nhiên, Alibaba, 9gag, Reuters, Xiaomi công ty sử dụng framework Vue tiếp tục phát triển số lượng ứng viên sử dụng có người tham gia từ Thung lũng Silicon framework javascript

ỦY BAN NHÂN DÂN TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC SÀI GÒN KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO VỀ VUEJS Môn học: Các Công Nghệ Lập Trình Hiện Đại

Giảng viên: Phạm Thi Vương

Nhóm 04:

TP Hồ Chí Minh, ngày 18 tháng 04 năm 2021

MỤC LỤC

1.1 Giới thiệu 1

1.2 Nguồn gốc và lịch sử phát triển 3

1.3 Lý do nên sử dụng Vuejs là gì? 3

1.4 Ưu và nhược điểm của Vuejs? 4

1.5 Các tính năng mới của từng phiên bản 6

1.5.1 Các tính năng của Vue 2.1.0 6

1.5.2 Các tính năng của Vue 2.2 6

1.5.3 Các tính năng của Vue 2.3 10

1.5.4 Các tính năng của Vue 2.4 12

1.5.5 Các tính năng của Vue 2.5 15

1.5.6 Tính năng của Vue 2.6 18

1.5.7 Các tính năng của Vue 3.0 19

1.6 So sánh Vue 2 và Vue 3 23

1.6.1 Sự khác biệt giữa Vue 2 và Vue 3 23

1.6.2 Nên sử dụng Vue 3 hay vẫn nên sử dụng Vue 2 cho một dự án mới? .32 1.6.3 Khi nào thì sử dụng Vue 3 và khi nào thì không ? 32

1.7 So sánh React và Vue 33

1.7.1 Điểm Tương Đồng 33

1.7.2 Sự Khác Biệt 33

1.8 So sánh Angular và Vue 38

1.9 Một số thư viện hữu ích cho Vue.js 45

1.9.1 Vue CLI 45

1.9.2 Nuxtjs 46

1.9.3 Gridsome 47

1.9.4 Vuex 48

1.10 Các khóa học Vue.js 49

1.10.1 Khóa học ZendVn 49

1.10.2 Khóa học VueMastery 50

1.11 Thông tin tuyển dụng nhu cầu tuyển dụng lập trình viên Vue.js 51

1.12 Triển vọng nghề nghiệp của lập trình viên Vue.js 54

II KIẾN THỨC CƠ BẢN 55 2.1 Vue Instance 55

2.2 Lifecycle Hooks 56

2.1.1 Giai đoạn khởi tạo : 56

2.1.2 Giai đoạn gắt kết DOM: 57

2.1.3 Giai đoạn cập nhật DOM khi dữ liệu thay đổi: 59

2.1.4 Giai đoạn hủy instance: 60

2.3 Cú pháp template 61

2.4 Methods 63

2.5 Thuộc tính computed và watchers, so sánh với methods 64

2.5.1 Computed properties: 64

2.5.2 Watchers: 65

2.6 Binding, Render, Xử lý sự kiện 66

2.6.1 Binding: 66

2.6.2 Render: 66

2.6.3 Form Input Binding: 69

2.6.4 Xử lý sự kiện: 70

2.7 Component 71

2.7.1 Khái niệm 71

2.7.2 Khai báo một Component 71

2.7.3 Tái sử dụng Component 75

2.7.4 Tổ chức Component 76

2.7.5 Đặc trưng cơ bản của Component 77

2.7.6 Vùng hoạt động của Components 77

2.7.7 Giao tiếp giữa các Components 80

2.8 Hiệu ứng chuyển động 84

2.8.1 Transition cho enter/leave & danh sách 84

2.8.2 Transition cho trạng thái 88

2.9 Tái sử dụng và kết hợp 89

2.9.1 Mixin 89

2.9.2 Directive tùy biến : 93

2.9.3 Các hàm render & JSX 98

2.9.4 Plugin 102

2.9.5 Filter 104

2.10 Công cụ 106

2.10.1 Triển khai cho môi trường production 106

2.10.2 Single File Components 108

2.10.3 Unit test 110

2.10.4 TypeScript Support 112

2.11 Mở rộng quy mô ứng dụng 112

2.11.1 Routing 112

2.11.2 Quản lý trạng thái 113

2.12 Reactivity in Depth 116 2.12.1 Cách các thay đổi được theo dõi 117 2.12.2 Thay đổi cảnh báo phát hiện 118

I TỔNG QUAN

1.1 Giới thiệu

- VueJS là một progressive framework được xây dựng dựa vào nền tảng của ngôn ngữ lập trình phía client Javascript, nhiệm vụ chính của VueJS là dùng đểxây dựng giao diện phía người dùng (UI) Không giống với các Framework khác, VueJS chỉ tập trung vào phần giao diện người dùng (view) nên bạn hoàn toàn có thể tích hợp vào project một cách đơn giản tương tự như jQuery

- VueJS đã ra tới phiên bản v3.x nhưng phiên bản v2.x vẫn là tối ưu nhất

- Tính đến thời điểm hiện tại thì VueJS đã cho ra 5 version khác nhau và cao nhất là version 2.3.4 Các version đó là:

Thông tin về VueJS:

Ngày phát hành Tháng 2- 2014

Tác giả gốc Evan You

Latest Version Vue 2.6.10

Data Binding Theo 1 chiều

Reuse code HTML and CSS

- Vuejs được gọi tắt là Vue (được phát âm là /vjuː/, nó giống như từ view trong tiếng Anh) Vue.js là một framework rất linh động được dùng phổ biến để xây dựng nên các giao diện người dùng Hoàn toàn khác với các framework nguyênkhối thì Vue thường sở hữu thiết kế từ đầu theo những hướng cho phép cũng như khuyến khích làm việc để phát triển dễ dàng hơn các ứng dụng theo từng bước một.

- Một khi đã phát triển lớp giao diện (view layer) thì người dùng chỉ cần sử dụng loại thư viện lỗi của Vue Ngoài ra, nếu như bạn kết hợp với các kỹ thuật thiên hướng hiện đại thì Vue cũng có thể đáp ứng được dễ dàng mọi nhu cầu xây dựng ứng dụng của một trang với độ phức tạp cao hơn

1.2 Nguồn gốc và lịch sử phát triển

- Vue đã được tạo ra và phát triển bởi Evan You khi ông đang làm kỹ sư tại công

ty Google Lúc Evan đang sử dụng Angular cho một số dự án khác thì đã có phát biểu rằng: “Điều gì sẽ xảy ra như trích một phần mà mình thích về

Angular rồi xây dựng thêm một cái gì đó nhẹ nhàng hơn mà không cần phải chú ý đến những khái niệm bổ sung” Đây là phát biểu được xem là bước đệm giúp cho Vue đã và đang có mặt tại thời điểm hiện tại

- Vue đã được phát hành vào đầu năm 2014 và dự án này đã được tăng tải lên HackerNew, Echo Js ngay trong ngày đầu tiên ra mắt

1.3 Lý do nên sử dụng Vuejs là gì?

- Mặc dù chỉ đứng thứ 3 trong danh

sách Top Frameworks Frontend 2020 ( Bảng xếp hạng các

Frameworks Frontend được sử dụng nhiều nhất 2020 thế nhưng Vue vẫn giữ sốStars cao nhất là 158k trong khi đó React chỉ đạt 145k và Angular là 58,4k.

- Vuejs có các cấu trúc thiết kế linh hoạt Nó cho phép ta thiết kế mọi thứ từ đầu

và thành công trong việc phát triển các dự án khổng lồ

- No build step required: Vue không cần sử dụng build tool quá phức tạp quá nhiều bước mới có thể xây dựng ứng dụng, bạn chỉ cần khai báo một script là

- Hệ sinh thái vững chắc: Vue sở hữu một hệ sinh thái cực kỳ vững chắc và đầy

đủ nên có thể cung cấp một số add-ons rất hữu ích cho việc xây dựng một ứng dụng fontend điển hình nhất Nó có thể bao gồm: vue-router, vuex, vue-test-utils, vue-dev-tools, vue-cli,…

- Core Vue linh hoạt: Vuejs tập trung vào việc render giao diện cho người dùng

và các tương tác của nó vì vậy, nó sẽ cung cấp tối thiểu những tính năng cần thiết cho việc thiết kế và xây dựng kiến trúc, đồng thời sẽ giúp bạn loại bỏ được các tính năng không cần thiết ra khỏi thư viện trong lõi Vue.js và đảm bảo cho framework nhỏ gọn và mềm dẻo hơn

1.4 Ưu và nhược điểm của Vuejs?

- Vue là một Frameworks tương đối đơn giản và dễ hiểu Nó rất tốt trong việc loại bỏ những điều phức tạp mà các nhà phát triển Angular phải đối mặt Vuejs

có kích thước nhỏ hơn và cung cấp hai ưu điểm chính đó là giao trực quan và khả năng tương tác

- Vue rất linh hoạt và bạn có thể nó khá đa năng từ việc xây dựng các ứng dụng

web và ứng dụng dành cho thiết bị di động đến các ứng dụng web thông minh,

nó có thể xử lý dễ dàng cả các quy trình đơn giản và nhanh chóng

- Mặc dù nó được xây dựng để tối ưu hóa hiệu suất ứng dụng và giải quyết các vấn đề phức tạp, nhưng Vuejs không được các hãng công nghệ khổng lồ trên

thị trường sử dụng Tuy nhiên, Alibaba, 9gag, Reuters, Xiaomi là những công

ty đang sử dụng framework này Vue tiếp tục phát triển về số lượng ứng viên

sử dụng mặc dù có ít người tham gia từ Thung lũng Silicon hơn các frameworkjavascript khác

- Dưới đây là các ưu nhược điểm của Vuejs để bạn cân nhắc trước khi sử dụng

Vuejs

● Ưu điểm của Vuejs

o Tài liệu hướng dẫn phong phú và chi tiết (chủ yếu là tiếng Anh)

o Tính linh hoạt để thiết kế cấu trúc ứng dụng

o Hỗ trợ TypeScript

o Một trong những ưu điểm của sự phát triển Vue.js là ứng dụng được phát triển

có thể nhẹ chỉ 18Kb sau khi nén Điều này làm cho nó trở thành lựa chọn đầu tiên được nhắm làm tiêu chí với những người dùng yêu cầu tiêu thụ bộ nhớ thấp

o Được viết bằng JavaScript và có các thuộc tính của code sạch, framework này giúp mọi người dễ đọc và hiểu code hơn để đưa quá trình phát triển đi xa hơn

o Vì kích thước ứng dụng là khá nhỏ, ứng dụng dựa trên Vue.js nhanh hơn khi tảixuống và sử dụng

o Vue.js tạo điều kiện cho quá trình tích hợp đơn giản và dễ dàng hơn Điều này làm cho developer yêu thích để xây dựng cả ứng dụng một page từ đầu và tích hợp các thành phần cao cấp vào một ứng dụng hiện có

● Nhược điểm của Vuejs

o Thiếu ổn định trong các components (phần tử cấu thành)

o Cộng đồng tương đối nhỏ

o Rào cản ngôn ngữ với các plugin và components (hầu hết các plugin được viết

bằng ngôn ngữ Trung Quốc)

I.5 Các tính năng mới của từng phiên bản

I.5.1 Các tính năng của Vue 2.1.0

I.5.2 Các tính năng của Vue 2.2

Vue 2.2 cung cấp một tập hợp các tính năng mới khá nhỏ, nhưng sẽ hợp lý hóa trải nghiệm phát triển của bạn

Tùy chỉnh mô hình v

- Trước đây, v-model đã truyền trực tiếp đầu vào cho : value và lấy đầu vào

từ @input (hoặc @change nếu sử dụng v-model.lazy ) Mặc dù đó vẫn là hành

vi mặc định, giờ đây bạn có thể tùy chỉnh thuộc tính và sự kiện được sử dụng cho v- mô hình với thuộc tính cấu hình thành phần mô hình

model: {

prop: 'myCustomProp',

event: 'myCustomEvent'

}

- Điều này làm cho v-model sử dụng :

myCustomProp và @myCustomEvent thay vì : value và @input :

- Điều này thật tuyệt vời khi có các dịch vụ dễ truy cập cho các phần nhất định của ứng dụng của bạn hoặc chia sẻ truyền tải dữ liệu

- Lưu ý: Thuộc tính được tiêm không phản ứng Tuy nhiên, các đối tượng phản ứng có thể được đưa qua hệ thống phun

- Bây giờ bất kỳ thành phần nào là con của ParentComponent đều có

thể đưa thuộc tính ThingIWantToShare vào

Kết xuất phía máy chủ

- Kết xuất phía máy chủ đã có một số cải tiến để hỗ trợ tùy chọn mẫu trực tiếp , cũng như định dạng gói được sửa đổi cho phép bạn xử lý các bản đồ nguồn và phân tách mã tốt hơn nhiều

- Đây là một chủ đề phức tạp và tài liệu vẫn còn nhiều Thêm không gian này để biết thêm chi tiết

<transition :duration="{enter: durationInMs, leave: durationInMs}"></transition>

- v-for bây giờ yêu cầu bạn chỉ định một thuộc tính khóa khi sử dụng nó trên mộtthành phần Điều này sẽ không ảnh hưởng đến ứng dụng của bạn, nhưng sẽ ghi lại các cảnh báo trong bảng điều khiển Điều này là để ngăn chặn các vấn đề phổ biến khác biệt DOM bắt nguồn từ việc xử lý các đối tượng phản ứng mà không biết thành phần nào được liên kết với khóa nào Đây đã là phương pháp hay nhất và thêm khóa vào các ứng dụng hiện có của bạn sẽ là một ý tưởng

- v-on: nhấp chuột (@click) bây giờ hỗ trợ các left , middle , và right bổ nút chuột cho thuận tiện, cho phép bạn có xử lý riêng biệt cho mỗi nút chuột.

- Trình phân tích cú pháp mẫu hiện sẽ gặp lỗi nếu nó gặp thẻ chưa

đóng ( <section><element> </section> không còn hợp lệ.) Thay vào đó, nếu bạn định có một thẻ chưa đóng, hãy sử dụng thẻ tự đóng ( <element /> ) thay thế hoặc chỉ cần đóng thẻ theo cách thủ công

- Bất kỳ thành phần nào là hậu duệ của một thành phần còn tồn tại , bất kể được lồng vào nhau như thế nào, bây giờ sẽ có các sự kiện vòng đời đã kích

hoạt và vô hiệu hóa của chúng

 Xử lý lỗi

- Có một số thay đổi đáng kể về cách Xử lý lỗi hoạt động trong Vue 2.2 để tránh

sự cố nếu một thành phần không khởi tạo được, Vue hiện gửi lỗi trong các mócvòng đời tới trình xử lý lỗi chung Điều này có nghĩa là bạn không còn phải sử dụng try / catch bên trong các móc vòng đời của mình nữa

- Nếu bạn muốn xử lý các lỗi này một cách rõ ràng, bạn có thể sử dụng hàm kết xuất renderError (h, error) tách biệt với mẫu thông thường hoặc hàm kết xuất của bạn để xử lý việc hiển thị chúng

- Ngoài ra, tùy chọn cấu hình errorHandler , Vue.config.errorHandler (err, component, errorType) , hiện cho phép bạn mắc vào tất cả các lỗi hiển thị trongứng dụng của mình và xử lý chúng Nếu bạn không xác định một chức năng ở đây, các lỗi được đưa ra sẽ không làm ứng dụng bị hỏng, mà thay vào đó, ghi lại lỗi bằng console.error

Khác

Những thay đổi nhỏ khác bao gồm:

- Các thuộc tính hiện tại của một thành phần được hiển thị thông qua $ Props này

- Nếu trình duyệt của bạn hỗ trợ API console.trace () , bạn có thể

bật Vue.config.performance trong chế độ phát triển để nhận thông tin chi tiết

về hiệu suất trong dòng thời gian của devtools

- this $ on (String | Array <String>, function) hiện chấp nhận một mảng tên sự kiện để cho phép bạn đăng ký cùng một trình xử lý cho nhiều sự kiện cái này

$ off chưa hỗ trợ xóa trình xử lý khỏi một mảng sự kiện

- Vue.delete (Object | Array, String | Number) hiện hỗ trợ xóa một mục tại một chỉ mục trong một mảng

 Khắc phục sự cố / Di chuyển

- Nếu trước đây bạn dựa vào Vue.util cho bất kỳ điều gì, thì có thể mã của bạn không còn hoạt động nữa Nhiều thuộc tính và phương thức đã bị xóa khỏi nó,

và nó không được sử dụng bên ngoài lõi Vue

- Do sự thay đổi trong cách xác định nội bộ đạo cụ và đạo cụ được tính toán, nếu

tính và thuộc tính được tính toán, nó sẽ không còn hoạt động như mong đợi Vềmặt sáng sủa, thay đổi sẽ cải thiện đáng kể tốc độ và chi phí bộ nhớ trong một

số trường hợp

- Trong Webpack 2, const Vue = demand ('vue') không còn hoạt động nữa, bạn nên sử dụng import Vue từ 'vue' để thay thế, hoặc const Vue = request ('vue') Mặc định , nếu bạn hoàn toàn không thể sử dụng cú pháp Mô-đun ES

- Nếu chuỗi xây dựng của bạn dường như không hoạt động bình thường, hãy đảm bảo rằng bạn đã nâng cấp vue-template-compiler và vue-loader /

vueify cùng với vue

I.5.3 Các tính năng của Vue 2.3

Vue 2.3 không bổ sung nhiều tính năng mới, chủ yếu tập trung vào việc cải thiện SSR

và các chỉnh sửa nhỏ Trên thực tế, điều đáng chú ý nhất có lẽ là việc giới thiệu lại công cụ sửa đổi sync từ Vue 1

: Prop.sync

- Khả năng ràng buộc hai chiều của các thuộc tính trong Vue 1 thông qua : prop.sync là tính năng rất được yêu thích mà nhiều người đã bỏ lỡ trong Vue

2 Nó đã bị xóa vì nó cho phép đột biến không chủ ý của các thuộc tính mẹ và

có thể dẫn đến một mớ hỗn độn lớn trong cơ sở mã của bạn

- Vâng, với việc phát hành Vue 2.3 , nó đã được thêm lại với một cơ chế hơi khác Công cụ sửa đổi sync hiện hoạt động giống như một mô hình v rõ ràng hơn Khi được sử dụng ,: prop.sync = ”binding” sẽ mở rộng hiệu quả thành : prop = ”binding” @update: prop = ”value => binding = value” Điều đó có nghĩa là nếu một thành phần con muốn cập nhật một prop đã đồng bộ hóa, nó cần phải phát ra rõ ràng sự kiện @update: propname với giá trị mới

- Điều này sẽ cung cấp một sự thay thế khá thuận tiện cho mô hình v cho các thành phần không phải đầu vào trong khi vẫn duy trì sự phân tách cha-con thíchhợp

Công cụ sửa đổi sự kiện mới: bị động

- Một thay đổi có vẻ nhỏ, nhưng cực kỳ đáng hoan nghênh trong bản phát hành Vue mới nhất là việc bổ sung công cụ sửa đổi sự kiện passive vào v-on Điều này cho phép một sự kiện bị ràng buộc theo cách mà nó nói rõ ràng rằng nó sẽ không hủy bỏ sự kiện Điều này có nghĩa là cải thiện hiệu suất đáng kể trên thiết bị di động cho các sự kiện nhất định, chẳng hạn như bánh xe, touchstart vàtouchmove

- Chúng tôi sẽ đề cập đến công cụ sửa đổi sự kiện thụ động trong JavaScript trong vài ngày tới

Cách sử dụng ví dụ:

<! my-component no longer has the ability to cancel the event >

<my-component @wheel.passive="handleEvent($event)"></my-component>

Liên kết kiểu mảng

- Các ràng buộc kiểu giờ đây cho phép bạn chuyển một mảng giá trị, thường dành cho các giá trị có tiền tố Điều này khá cụ thể và có thể không cần thiết nếu bạn đã có một tiền tố tự động trong chuỗi xây dựng của mình, nhưng nó có thể hữu ích cho một số người.

Cách sử dụng ví dụ:

<! From https://github.com/vuejs/vue/releases/tag/v2.3.0 >

<div :style="{display: ["-webkit-box", "-ms-flexbox", "flex"]}">

Khác

Những thay đổi nhỏ khác bao gồm:

- Trình xử lý lỗi giờ đây đáng tin cậy hơn và cung cấp dấu vết ngăn xếp có chứa cây thành phần

- Xác nhận thuộc tính hiện hỗ trợ loại: Biểu tượng

- Bây giờ bạn có thể sử dụng các thành phần Vue.extend () 'ed làm mixin

- Các thành phần chức năng bây giờ có thể sử dụng tiêm như các thành phần bình thường (Được truy cập bởi context.injutions )

- Nếu không có tùy chọn đạo cụ nào được cung cấp cho các thành phần chức năng, các thuộc tính sẽ được tự động trích xuất vào context.props

- Trình nghe v-on cho các thành phần chức năng sẽ được đặt biệt danh

là context.listists cùng với context.data.on cũ

- Async Component Factories hiện có thể trả về một đối tượng chứa thông tin về việc tải và hiển thị các thành phần lỗi nào và khi nào

 Khắc phục sự cố / Di chuyển

- Thuộc tính server-render = ”true” cho biết ứng dụng SSR được hiển thị giờ đâyđược gọi là data-server-render để làm cho nó trở thành HTML hợp lệ Điều này

sẽ không ảnh hưởng đến bạn trừ khi bạn đang dựa vào tài sản đó để làm gì đó

- vue-ssr-webpack-plugin hiện không được dùng nữa, nó đã được thay thế

bằng vue-server-render / server-plugin và vue-server-render / client-plugin

- Nếu các thành phần không đồng bộ của bạn ngừng hoạt động, hãy đảm bảo rằng bạn đã nâng cấp bộ định tuyến vue lên phiên bản 2.4.0 trở lên

I.5.4 Các tính năng của Vue 2.4

Không có quá nhiều điều mới trong Vue 2.4 , nhưng những gì đã được thêm vào có thể sẽ cực kỳ hữu ích đối với một số người nhất định

- Các thành phần không đồng bộ giờ đây “chỉ hoạt động” khi hiển thị qua SSR ,

ở bất kỳ đâu trong ứng dụng Trước đây nó chỉ hoạt động trong

vue-router Điều này yêu cầu một số thay đổi trong lõi để sửa đổi cách các mô-đun được giải quyết, vì vậy hãy đảm bảo rằng bạn cũng nâng cấp vue-

loader Handoff và hydrat hóa giữa máy chủ và máy khách với các thành phần không đồng bộ cũng hoạt động tốt hiện nay

Tối ưu hóa SSR

- vue-template-compiler hiện tối ưu hóa các gói phía máy chủ theo mặc định với các chức năng kết xuất đặc biệt giúp giảm các mẫu trở nên đơn giản nhất có thểthông qua nối chuỗi Điều này có thể cung cấp các cải tiến hiệu suất lên đến 8 lần Điều này có thể bị vô hiệu hóa với optimizeSSR tùy chọn trong vue-loader

Cải tiến thành phần Wrapper

- Khi viết một thành phần trình bao bọc, đôi khi bạn muốn chuyển tất cả các đạo

cụ trên trình bao bọc vào con và nhận tất cả các sự kiện từ con

- Để khắc phục một phần của vấn đề này, Vue đã thêm các thuộc tính thể hiện

bọc được tạo ra mà chỉ cần chuyển tất cả các thuộc tính và trình lắng nghe xuống cho phần tử con.

- Hơn 25 lỗi đã được sửa.

 Khắc phục sự cố / Di chuyển

- Nếu các thành phần không đồng bộ của bạn đột nhiên ngừng hoạt động bình thường, đặc biệt là với kết xuất phía máy chủ, hãy đảm bảo rằng bạn đã nâng cấp vue-loader lên phiên bản 13.0.2 trở lên

I.5.5 Các tính năng của Vue 2.5

Hỗ trợ TypeScript được cải thiện

- Vue luôn có một chút khó khăn để làm việc khi sử dụng TypeScript Do cấu hình dựa trên đối tượng, nó có xu hướng khó xác định kiểu chữ thích hợp và các thành phần tệp đơn không giống như các tệp JS thông thường

- Tuy nhiên, với bản phát hành này, một số người từ nhóm TypeScript đã thực hiện một số thay đổi lớn đối với Vue để thêm tất cả các loại tính năng thú vị khi làm việc với TypeScript

- Do đó, giờ đây, Vue 2.5bạn có thể nhận được các đề xuất tự động hoàn thành nội dung và các gợi ý nhập ngay cả khi bạn không sử dụng TypeScript Điều này hoạt động với bất kỳ trình soạn thảo nào hỗ trợ giao thức ngôn ngữ-máy chủ thông qua vue-language-server Hiện tại, đó chủ yếu là Visual Studio Code + Vetur

xóa "allowSyntheticDefaultImports": true,khỏi của bạn tsconfig.json

- Bạn sẽ cần phải nâng cấp tất cả các thư viện Vue, bao gồm: vuex,

vue-router, vuex-router-sync, và vue-class-component

- Nếu bạn đang mở rộng Vue bằng cách sử dụng namespace Vue, bạn sẽ cần chuyển nó sang sử dụng interface VueConstructornhư đã thấy

- Bạn có thể phải điều chỉnh tờ khai loại hình cho computed, watch, rendermóc,

và vòng đời mà tham khảo thành phần Vue trong một số trường hợp

Các thành phần một tệp chức năng

- Các mẫu hiện hỗ trợ functionalthuộc tính, có nghĩa là bây giờ có thể viết các thành phần chức năng mà không cần sử dụng các hàm kết xuất hoặc JSX trực tiếp

- Các thành phần chức năng không có thể hiện và do đó không có ngữ cảnh ràng buộc Do đó, bạn phải tham chiếu đến propsthành phần với props.myPropthay

- Các SFC chức năng hiện cũng hỗ trợ CSS theo phạm vi và tải lại nóng

- Kết xuất phía máy chủ với môi trường không xác định

- Một bản dựng không vue-server-renderercó nút đã được xây dựng cho bản pháthành này cho phép hiệu quả chạy trình kết xuất trên hầu hết các nền tảng JS, ngay cả khi không có Node.js Điều này cho phép bạn có khả năng hiển thị các ứng dụng Vue từ thời gian chạy JS trong các ứng dụng máy chủ PHP và Java

slot-mà không yêu cầu trình bao bọc mẫu

- data: (componentInstance) => ({ myDataThing: componentInstance.myProp })

- Hiện đã có một bản dựng vue-template-compiler có thể chạy trực tiếp trong trình duyệt

- config.ignoredElementsbây giờ có thể bỏ qua bởi RegEx thay vì chỉ

chuỗi Điều này rất tốt để làm việc với các thư viện cung cấp các phần tử tùy chỉnh có tiền tố (ví dụ ion-*)

- v-onhiện hỗ trợ tất cả các phím do KeyboardEvent.key cung cấp dưới dạng bổ ngữ dựa trên kebab Ví dụ, @keyup.arrow-up= bây giờ là hợp lệ

- v-onhiện có một công cụ exactsửa đổi chỉ khớp với các phím bổ trợ chính xác được nhấn tại thời điểm diễn ra sự kiện Ví dụ, @keydown.a.shiftcháy ngay cả với SHIFT+CTRL+A, trong khi @keydown.a.shift.exactchỉ chấp

nhận SHIFT+A

- Giờ đây, các thành phần có thể nắm bắt các lỗi do con của chúng tạo ra bằng cách sử dụng hookCaptured mới

- Hơn 15 lỗi đã được sửa

I.5.6 Tính năng của Vue 2.6

Để bắt đầu mọi thứ, Slots, một cơ chế quan trọng cho phép cấu thành thành phần linh hoạt trong Vue, đã nhận được một số cập nhật lớn.

 Cú pháp mới: Hợp nhất việc sử dụng các vị trí thông thường và có phạm vi

trong một chỉ thị duy nhất và thực thi việc sử dụng các vị trí được đặt tên rõ ràng và dễ đọc hơn Nó cũng hoàn toàn tương thích với cú pháp hiện có

 Cải thiện hiệu suất: Giới thiệu một tối ưu hóa đảm bảo hơn nữa các đột biến

phụ thuộc phạm vi chính chỉ ảnh hưởng đến thành phần chính và sẽ không còn buộc thành phần con cập nhật nếu nó chỉ sử dụng các vị trí trong phạm vi

 Không còn sự phân biệt giữa các vị trí có phạm vi và không có phạm vi: Tất cả các vị trí sẽ sử dụng cùng một cú pháp thống nhất, được biên dịch

thành cùng một định dạng và có cùng hiệu suất tối ưu

Chuyển sang phần còn lại của các bản cập nhật, chúng tôi có những điều sau:

 Xử lý lỗi không đồng bộ - Cơ chế xử lý lỗi tích hợp của Vue

( errorCaptured móc trong thành phần và errorHandler móc toàn cục ) giờ đâycũng ghi lại các lỗi bên trong v-ontrình xử lý Ngoài ra, nếu bất kỳ móc vòng đời hoặc trình xử lý sự kiện nào của bạn thực hiện các hoạt động không đồng

bộ, giờ đây bạn có thể trả về một Promise từ hàm để bất kỳ lỗi nào chưa được khắc phục từ chuỗi Promise đó cũng được gửi đến trình xử lý lỗi của bạn

 Đối số chỉ thị động - Các đối số chỉ thị hiện có thể chấp nhận các biểu thức

JavaScript động

 Khung mã trong thông báo cảnh báo trình biên dịch - Hầu hết các cảnh báo

biên dịch mẫu hiện nay đều đi kèm với thông tin phạm vi nguồn

 Tạo rõ ràng các đối tượng phản ứng độc lập - API toàn cầu mới để tạo rõ

ràng các đối tượng phản ứng độc lập Đối tượng kết quả có thể được sử dụng trực tiếp trong các thuộc tính được tính toán hoặc các hàm kết xuất và sẽ kích hoạt các bản cập nhật thích hợp khi bị thay đổi

 Tìm nạp trước dữ liệu trong quá trình hiển thị phía máy chủ

-serverPrefetch hook mới cho phép bất kỳ thành phần nào (thay vì chỉ các thành phần cấp tuyến) tìm nạp trước dữ liệu trong quá trình hiển thị phía máy chủ, cũng cho phép sử dụng linh hoạt hơn và giảm sự kết hợp giữa tìm nạp dữ liệu và bộ định tuyến

 Bản dựng mô-đun ES để nhập trực tiếp - Vue 2.6 hiện cũng cung cấp bản

dựng Mô-đun ES nhằm mục đích sử dụng trực tiếp trong trình duyệt

Cuối cùng nhưng không kém phần quan trọng, có một số thay đổi nội bộ đáng kể mà chúng ta nên đề cập đến

 Hoàn nguyên tiếp theo Nhấp vào Microtask: Một bản sửa lỗi đơn giản hơn

cho sự cố ban đầu, cho phép hoàn nguyên nextTick để sử dụng nhất quán các

Vi nhiệm trong mọi trường hợp

 Chức năng trên this.$scopedSlots hiện nay luôn luôn trả Mảng: chức năng

khe scoped hiện đang được bảo đảm để trở về hoặc là một mảng của VNodes hay undefined Điều này có thể ảnh hưởng đến một số mã hiện có nếu nó không kiểm tra chính xác các giá trị trả về có thể có của Mảng

I.5.7 Các tính năng của Vue 3.0

- Trong vài năm gần đây, đã có những thay đổi trong bối cảnh phát triển của Vuejs Cộng đồng đã phát triển từ một doanh nghiệp nhỏ mới thành lập thành một thư viện SPA chính thức Với phiên bản 3 sắp ra mắt, nhóm đã bổ sung một số hỗ trợ để tăng cường thư viện, đơn giản hóa mã hóa trên Vue và áp dụng các kỹ thuật phát triển Web hiện đại

- Hãy cùng tìm hiểu các tính năng mới chính của Vue 3.0 sẽ hướng dẫn bạn cách phát triển các ứng dụng Vue

API thành phần

- Các thành phần trong Vue 2.0, được tạo bằng API Tùy chọn dựa trên đối tượng Một trong những tính năng mới của Vue 3.0 là nó đã thêm một tập hợp các API dựa trên chức năng được gọi là API thành phần Các API này đã được thêm vào để giải quyết các vấn đề mà Vue 2 phải đối mặt cho các dự án rất lớn

- API thành phần đã gây ra nhiều tranh cãi nhất với cộng đồng Vue Nó có thể được coi là một cách mới để phát triển các thành phần, một sự thay đổi rõ rệt đối với API Tùy chọn API thành phần đã được ra mắt dưới dạng một plugin cách đây vài tháng, tuy nhiên trong Vue 3.0, nó không phải được cài đặt như một trình cắm như trước đây Nó hiện đã được tích hợp sẵn trong gói và có thể được sử dụng mà không cần thiết lập thêm

- Lý do chính đằng sau việc xây dựng API thành phần là để cải thiện chất lượng của mã bằng cách cho phép tách các tính năng của logic Trái ngược với Vue 2,nơi các nhà phát triển dựa vào việc mở rộng đối tượng và sau đó chia sẻ logic, Vue 3 cho phép chia sẻ các tính năng thông qua các mẫu JavaScript /

TypeScript tiêu chuẩn thay vì phát minh ra các mẫu mới Điều này giúp nhìn thấy các tính năng khi chúng được thêm vào Ngoài ra, API thành phần giúp các kiểu suy luận dễ dàng hơn, hỗ trợ bảng sắp chữ theo cách tốt hơn

- Vue 3.0 cho phép bạn xây dựng các thành phần và cho phép API mới cùng tồn

năng tổ chức mã linh hoạt hơn và khả năng tái sử dụng logic cùng với các cải tiến khác Mã dễ đọc, được sắp xếp tốt hơn khi được viết bằng API thành phần.

Hỗ trợ TypeScript tốt hơn

- Với sự ra đời của API thành phần, các chức năng bên trong được sử dụng như mong đợi trong JavaScript cho phép hỗ trợ TypeScript tốt hơn nhiều Nó dẫn đến suy luận loại tốt hơn với các ràng buộc được trả về từ thiết lập cùng với cáckhai báo đạo cụ được sử dụng để suy ra loại Định nghĩa TypeScript phần lớn mang lại lợi ích cho người dùng JavaScript, làm cho mã Thành phần của

TypeScript và JavaScript trông giống hệt nhau

- Bản ghi hỗ trợ trong việc nâng cao khả năng bảo trì của cơ sở mã Vue và giúp các nhà phát triển đóng góp dễ dàng hơn Nó là sự lựa chọn thường xuyên cho các dự án lớn vì tính phổ biến của nó Việc có Vue 3 bên trong TypeScript giúphưởng lợi đầy đủ từ TypeScript của Vue với sự hỗ trợ mã thông thường có sẵn trong các IDE hiện đại như Visual Studio Code hoặc WebStorm Vì mã Vue của TypeScript 90% là JavaScript, người dùng JavaScript cũng được hưởng lợi

từ các tính năng thông minh của mã với các IDE hiện đại

const name = ref("Shawn");

const allCaps = computed(() => {name.value.toUpperCase()});

- Đối với các mẫu, các đối tượng không được bao bọc theo mặc định cần sử dụng value thay vì các đối tượng được bao bọc:

<template>

<div>

<label>Name: </label>

<input v-model="name">

<div>{{ name }}</div>

<div>{{ allCaps }}</div>

nhau Một khuôn mẫu phân chia các nút tĩnh khỏi các nút động theo dõi các phần và sự phụ thuộc của chúng trong một cấu trúc dữ liệu cụ thể Trong khi tạo mẫu, mã được sử dụng trong Vue 2.0 tương tự như Vue 3.0 Hỗ trợ của Vuecho các phân đoạn rất hữu ích vì nó hiển thị các thành phần trong danh sách để loại bỏ các phần tử div của trình bao bọc không cần thiết Nó trông như thế này;

class Columns extends React.Component {

- Phân đoạn sẽ không được hiển thị trong cây DOM mặc dù là một DOM bình

thường giúp liên kết chức năng thành phần vào một phần tử duy nhất mà khôngtạo nút DOM dự phòng

Nhiều mô hình V

- V- model là một chỉ thị được sử dụng để ràng buộc hai chiều trên một thành phần nhất định Nó chủ yếu được sử dụng với các thành phần biểu mẫu và các thành phần tùy chỉnh.

Một mô hình V nổi tiếng từ các phần tử biểu mẫu trông như thế này:

<input v-model="property />

Nhưng câu hỏi đặt ra là chúng ta sử dụng nó như thế nào trong mọi thành phần?

- Dưới mui xe, Nó có thể được sửa đổi từ bên trong của một thành phần bằng cách chuyển một thuộc tính phản ứng và lắng nghe các sự kiện đầu vào

Hãy viết lại ví dụ trên để xem cú pháp sẽ có tác dụng như thế nào bên dưới:

Hồi hộp

- Suspense là một tính năng mới của Vue 3.0 giúp hiển thị một thành phần mặc định cho đến khi thành phần chính tìm nạp dữ liệu Các hoạt động không đồng

bộ được sử dụng để tìm nạp dữ liệu từ máy chủ được thực hiện bởi

Suspense Nó có thể được sử dụng trong các phần riêng lẻ của mẫu hoặc toàn

bộ mẫu Đó là ý tưởng được bắt nguồn và điều chỉnh từ hệ sinh thái React để tạm ngừng hiển thị thành phần của bạn

Cổng thông tin

- Cổng là các thành phần đặc biệt được sử dụng để hiển thị một số nội dung bên ngoài thành phần hiện tại Cổng là một cách hàng đầu để hiển thị phần tử con vào một nút DOM, tồn tại bên ngoài hệ thống phân cấp DOM của thành phần

thành phần thường xuất hiện trên đầu trang Tính năng Vue 3.0 này của Vue 3.0 đảm bảo rằng không có quy tắc CSS nào của thành phần máy chủ sẽ ảnh hưởng đến thành phần bạn muốn hiển thị và sau đó giúp bạn không phải thực hiện các vụ tấn công khó chịu với z-index Đối với điều này, mọi cổng thông tin cần phải cụ thể về điểm đến mục tiêu của chúng, nơi nội dung cổng thông tin sẽ được hiển thị.

I.6 So sánh Vue 2 và Vue 3

1.6.1 Sự khác biệt giữa Vue 2 và Vue 3

Phiên bản chính thức của Vue 3 sẽ phát hành vào quý 3 năm 2020 Nó hiện đang tronggiai đoạn ứng cử viên phát hành có nghĩa là các API, cốt lõi, cấu trúc ổn định và có thể trở thành bản phát hành sản xuất trừ khi xuất hiện các lỗi đáng kể Do đó, đây là thời điểm thích hợp để tìm ra sự khác biệt về lập trình nào giữa Vue 3 và Vue 2 và thực hiện các điều chỉnh cần thiết

Vue 3 không thay đổi hoàn toàn với Vue 2 nhưng khi hoàn thành việc viết lại nó từ Vue 2, một số nâng cấp được mong đợi sẽ biến thành hiện thực Dự kiến có nghĩa là

nó làm cho ứng dụng của chúng ta nhỏ hơn, nhanh hơn và mạnh mẽ hơn

Lý do cho sự thay đổi

Cấu hình toàn cục gây ra các vấn đề trong quá trình thử nghiệm trong các thử nghiệm đơn vị vì các trường hợp thử nghiệm có thể ảnh hưởng lẫn nhau bởi cấu hình toàn cục.Tất cả những ảnh hưởng đó là ô nhiễm

Vue 3 cung cấp các cấu hình toàn cầu khác nhau nhưng gây khó khăn cho việc chia sẻbản sao cấu hình cho nhiều ứng dụng

Thông báo này không bao giờ xuất hiện trong Vue 3

- Quản lý và duy trì logic giữa các thành phần là một vấn đề lớn (mixin).

Do đó, sự xuất hiện của API thành phần sẽ giải quyết các vấn đề trên

Các tính năng của API thành phần bao gồm:

- Hỗ trợ TypeScript tối ưu

Trong Vue 3, bạn có thể thay thế setup()phương thức này bằng một số tùy chọn sau:

} components: { /* */

}, data (){

return { /* */

} }, computed:

/* */

}, watch:

/* */

}, methods: { /* */

}, created (){

/* */

}, mounted (){

/* */

</ script >

Tham chiếu phản ứng

Tham chiếu là "Tham chiếu phản ứng" bao bọc dữ liệu nguyên thủy để cho phép chúng ta theo dõi sự thay đổi Đừng quên rằng chúng ta sử dụng data () để bọc đối tượng bên trong nguyên thủy trong Vue 2

Vue 2:

Vue 3:

Phương pháp

Vue 2 có một phần riêng cho các phương thức nhưng trong Vue 3, bạn có thể xác địnhcác phương thức trong phương thức setup () Đây là một ví dụ về việc tạo các phương thức bằng phương thức setup ().

Vue 2:

Vue 3:

Tính toán

Vue 2 có một phần riêng biệt dành cho tính toán nhưng bạn có thể xác định một hàm trong phương thức setup () Hãy để tôi chỉ cho bạn cách triển khai tính toán trong phương thức setup ()

Vue 2:

Xóa bộ lọc Vue

Bộ lọc không còn được dùng trong Vue 3, có thể được sử dụng để áp dụng định dạng văn bản phổ biến

1.6.2 Nên sử dụng Vue 3 hay vẫn nên sử dụng Vue 2 cho một dự án mới?

Nếu bạn quyết định sử dụng Vue cho một dự án sản xuất mới, khuyến nghị chính thức

là vẫn nên bắt đầu với Vue 2 ngay bây giờ Nếu bạn làm vậy, hãy theo dõi các thay đổi và tránh sử dụng các tính năng đã bị loại bỏ cũng như các thư viện của bên thứ ba

có khả năng không được cập nhật nhanh chóng

Nếu bạn có thể đợi lâu hơn một chút, hãy làm điều đó và sau đó bắt đầu phát triển với Vue 3 ngay khi tất cả các dự án con cũng ổn định Tuy nhiên, hãy nhớ rằng không phải tất cả các thành phần nguồn mở đều có thể sẵn sàng trong các phiên bản v3

1.6.3 Khi nào thì sử dụng Vue 3 và khi nào thì không ?

- Nếu bạn cần hỗ trợ IE11: không sử dụng nó, hỗ trợ vẫn chưa có

- Nếu bạn đang ở trong một dự án lớn hiện có: không sử dụng 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á

- Nếu bạn gặp vấn đề về hiệu suất ngay cả sau một số tối ưu hóa: hãy sử dụng nó

- Nếu bạn cần hỗ trợ TypeScript tốt hơn: hãy sử dụng nó, cách tốt hơn trước đây!

- Nếu phụ thuộc của bạn hỗ trợ Vue 3: hãy sử dụng nó (đội trưởng nói rõ ràng)

- Cuối cùng, tôi khuyến khích bất kỳ dự án mới nào không cần hỗ trợ IE11 hãy sửdụng Vue 3

1.7 So sánh React và Vue

1.7.1 Điểm Tương Đồng

● Điểm tương đồng lớn nhất của 2 công nghệ React và Vue là đều tương tác với Virtual DOM (DOM là tên gọi tắt của Document Object Model (Mô hình Đối tượng Tài liệu), là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên code HTML hay XML bằng các ngôn ngữ lập trình thông dịch (scripting language) như Javascript.) Ngoài ra cả React lẫn Vue đều rất nhẹ, sửdụng kiến trúc xoay quanh các components và lifecycle.Bên cạnh đó, cả 2 đều

có một cộng đồng hỗ trợ to lớn, sẵn sàng hỗ trợ giúp đỡ

1.7.2 Sự Khác Biệt

- Sự khác biệt rõ ràng nhất: React là một thư viện, trong khi Vue là một

framework

- React cho phép thao tác DOM, kiến trúc thành phần và quản lý trạng thái Tất

cả phần còn lại là tùy thuộc vào cộng đồng Cách tiếp cận này cung cấp rất nhiều tự do cho các nhà phát triển Nhiều ứng dụng React dựa vào các thư viện của bên thứ ba, được xây dựng và hỗ trợ bởi cộng đồng và sự lựa chọn cho mộtứng dụng phù hợp có thể là thách thức cho người mới bắt đầu

- Vue, mặt khác, được quan tâm nhiều hơn và đi kèm với rất nhiều đường cú

pháp, hệ thống plugin, chỉ thị tích hợp, chuyển tiếp, v.v Ngoài ra, đội ngũ phát triển đã tạo ra các thư viện đồng hành để định tuyến và quản lý trạng thái cùng với các công cụ hữu ích khác Một số ví dụ về các thư viện đồng hành như vậy

là Vue-router, Vuex cho quản lý nhà nước và Vue CLI Tất nhiên, người dùng không bắt buộc phải sử dụng các công cụ này vì có một số lựa chọn thay thế Lợi ích chính là những thứ này được xây dựng và hỗ trợ bởi đội ngũ nòng cốt Trọng tâm chính của Vue, là sự đơn giản và nhóm đã quan tâm đến những mối quan tâm chung này, cho phép thiết lập và phát triển nhanh hơn Vue đang nhanh chóng bắt kịp React và cộng đồng đã xây dựng rất nhiều thư viện của bên thứ ba, làm phong phú hệ sinh thái của nó

❖ Quản lý dữ liệu

- Để ứng dụng web có tính tương tác cao, UI phải liên tục phản ứng với các thay đổi dữ liệu và dữ liệu này được gọi là state Một trong những điểm tương phản lớn nhất giữa React và Vue là cách họ xử lý sự thay đổi state Điều này ảnh hưởng lớn đến cơ chế đằng sau các bản cập nhật

UI, còn được gọi là re-rendering

- React được biết đến với việc sử dụng Functional Programming (FP) Nóthực hiện các nguyên tắc FP, chẳng hạn như các hàm bậc cao hơn, bấtbiến, các hàm thuần túy, v.v Triết lý đằng sau React là state thường là

dữ liệu không thay đổi Khi cố gắng thay đổi đối state, UI sẽ khôngđược re-rendering Để kích hoạt re-rendering, nên sử dụng phươngthức setState

- Trong Vue, state được thể hiện trong đối tượng dữ liệu Không giốngnhư React, việc thay đổi đối tượng dữ liệu sẽ kích hoạt UI re-rendering

❖ Template và Styling

- React sử dụng JSX (một phần mở rộng cú pháp cho JavaScript) Cú pháp của nó giống với HTML với một số khác biệt đáng kể Nó cung cấp trải nghiệm nhà phát triển mượt mà hơn, gỡ lỗi và khả năng đọc mã tốt hơn

- Vue có một cách tiếp cận thận trọng hơn đối với template & styling - một cách tách biệt khỏi logic Đánh dấu được thể hiện dưới dạng các mẫu trông giống như HTML Trên thực tế, mọi HTML hợp lệ cũng là một mẫu Vue hợp lệ Bên trong template, Vue cung cấp rất nhiều đường

cú pháp như điều kiện, lặp, v.v

❖ Khả năng mở rộng

- Mở rộng ứng dụng Vue hoặc React với các thư viện của bên thứ ba khá đơn giản Hầu hết các thư viện nhà cung cấp cho React chỉ đơn giản là các thành phần nâng cao những cái hiện có Chẳng hạn, thư viện React-Redux đang sử dụng API bối cảnh và hiển thị một thành phần bậc cao

Trong Vue, nhiều thư viện của bên thứ ba ở dạng plugin, tận dụng hệ thống plugin tích hợp Các plugin có thể được thêm bằng cách sử dụng phương thức Vue.use.

do số lượng khá nhiều và cũng "thượng vàng hạ cám"

Dễ học, tài liệu khá ít ỏi nhưng rõ ràng

và dễ hiểu (https://vuejs.org/v2/guide/)

Tổ chức file

- Sử dụng JSX trong đó

cả HTML và CSS đều được thể hiện qua JavaScript với cú pháp XML

- Có thể viết chung cả JSX hoặc CSS trong một file hoặc tách riêng được

- Sử dụng HTML thông thường hoặc khác (tùy chọn)

- Cách tiếp cận truyền thống: để cả HTML/CSS/JS trong một file, cũng có thể tách riêng

Hệ sinh thái

Dựa vào các giải pháp bên ngoài như

Flux/Redux để định tuyến và quản lý state bằng cách cung cấp một cách duy nhất để sửa đổi state, các khuôn khổ này đơn giản hóa việc gỡ lỗi

Có ít thư viện đồng hành hơn Với các ứng dụng lớn hơn, vẫn sẽ cần một thư viện bên ngoài để quản lý trạng thái như Vuex hoặc định tuyến như Vue-Router Giống như Redux, nó chỉ có một cách đểthay đổi state bằng cách sử dụng các hàm xử lý được gọi là mutations