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

Ủ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


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 hồn
tồ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à:
+ VueJS 0.11
+ VueJS 0.12
+ VueJS 1.0
+ VueJS 2.x
+ VueJS 3.x

3


Thông tin về VueJS:
Thông số

Vue.js

Ngày phát hành

Tháng 2- 2014

Tác giả gốc

Evan You

Latest Version

Vue 2.6.10

Ngơn ngữ

JavaScript

Cách Học

Dễ dàng học được

Kích thước app

-

30.67 KB (in production),
279 KB (in development)

Độ phức tạp

Vừa phải

Kiến trúc

MVC

Tài liệu

Chi tiết

DOM

Ảo

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ên
4


khố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.

5


-

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à

có thể phát triển một ứng dụng bằng Vue.

-

Command line interface: Vue có thể tạo cấu trúc project nhanh chóng hơn nhờ
vào command line interface.

-

Đa dạng tài liệu: Hiện nay, nguồn tài liệu về Vue ngày càng đa dạng, rõ ràng về
ngơn ngữ nên bạn có thể dễ dàng trở thành chuyên gia về nó.

-

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-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
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
6


sử dụng mặc dù có ít người tham gia từ Thung lũng Silicon hơn các framework
javascript 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ải
xuống và sử dụng.
o Vue.js tạo điều kiện cho q 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
7

Slots có phạm vi
-

Vị trí có phạm vi là một loại vị trí đặc biệt có chức năng như một mẫu có thể sử
dụng lại (có thể được chuyển dữ liệu đến) thay vì các phần tử đã được kết xuất.

Keep-alive
-

<keep-alive> bây giờ có thể được định cấu hình thành các thành phần bộ nhớ
cache có điều kiện bằng cách sử dụng các đạo cụ bao gồm và loại trừ mới.

v-else-if
-

Một chỉ thị mới v-else-ifđược giới thiệu
Sử dụng bộ lọc thư giãn
Bộ lọc hiện cũng được hỗ trợ trong biểu thức v-bind (ngoài nội suy văn bản).

Cập nhật thêm:
-

Điều chỉnh tệp Dist

Cải tiến JSX
vue-server-render
vue-template-compiler

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 :

<!-- v-model version -->
<child-component v-model="binding"></child-component>
<!-- Translates to: -->
8


<child-component :myCustomProp="binding" @myCustomEvent="evt => { binding
= evt }"></child-component>
Provide / Inject
-

-

Vue hiện cung cấp một cơ chế tiêm phụ thuộc cơ bản, có thể so sánh với hệ
thống ngữ cảnh của React. Nó cho phép bạn gắn các thuộc tính vào một thành
phần mẹ và có thể truy cập chúng để đưa vào trong tất cả các thành phần con
của nó.
Đ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.

<template>
<child-component-1>
<child-component-2>
<child-component-3></child-component-3>
</child-component-2>
</child-component-1>
</template>
<script>
import {ChildComponent1, ChildComponent2, ChildComponent3} from
'./components'
const ThingIWantToShare = {
importantString: 'boop'
}
export default {
provide: {
ThingIWantToShare
}
}
</script>
-

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 .

<template>

{{ ThingIWantToShare.importantString }}

</template>
9


<script>
export default {
inject: ['ThingIWantToShare']
}
</script>
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.

Những thay đổi:
Có một số thay đổi nhỏ cũng giúp cải thiện trải nghiệm phát triển với Vue hơn nữa.
• Mẫu
- Thẻ chuyển tiếp và nhóm chuyển tiếp giờ đây cho phép bạn xác định thời
lượng cho quá trình chuyển đổi, giống như vậy.
<transition :duration="durationInMs"></transition>

<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ột
thà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
hay.
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.
10


-

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óc
vị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 ngồ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 tốn, nếu
bạn thực hiện bất kỳ lệnh gọi nào tới Object.hasOwnProperty để xác thực thuộc
tính và thuộc tính được tính tố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 hồn tồn khơng thể sử dụng cú pháp Mô-đun ES.

11


-

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ích hợp.
Cách sử dụng ví dụ:

<my-component :prop.sync="binding"></my-component>
Định nghĩa thành phần :
<template>

</template>

<script>
export default {
props: {

12


prop: String
},

methods: {
updateProp() {
this.$emit('update:prop', this.prop + ' Updated!')
}

}
}
</script>
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ụ:
13

<!-- From -->
<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ó q 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.
Hỗ trợ thành phần SSR + Async
-

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 vuerouter . Đ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 vueloader . 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.
14


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 vueloader .

…
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
optimizeSSR: false
}
}
],

...

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
phản ứng $ attrs và $ listening . Điều này cho phép một thành phần trình bao
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.

Ví dụ:
<template>
<div class="wrapper">
15


<child-comp v-bind="$attrs" v-on="$listeners">
</child-comp>
<div class="footer">
Stinky feet.
</div>
</div>
</template>
-

Để hỗ trợ điều này, v-on hiện có thể lấy một đối tượng có tên sự kiện -> ánh xạ
trình xử lý. Tuy nhiên, cú pháp này khơng hỗ trợ các bổ ngữ.
Ngồi ra, một tùy chọn thành phần mới, inheritAttrs đã được thêm vào. Bằng

cách đặt nó thành false, bạn có thể ngăn mọi ràng buộc không xác định được kế
thừa tự động.

Khác
-

Thành phần giữ nguyên hiện hỗ trợ lấy một mảng tên thành phần cho các đạo
cụ bao gồm và loại trừ .
- v-bind = ”{object}” hiện hỗ trợ công cụ sửa đổi .sync . Người dùng Vue ở khắp
mọi nơi vui mừng.
- Một tùy chọn thành phần nhận xét đã được thêm vào, cho phép các thành phần
bảo toàn nhận xét khi biên dịch để hiển thị các chức năng. Điều này có thể hữu
ích cho bạn nếu một số thư viện mà bạn đang làm việc dựa vào các nhận xét vì
lý do này hay lý do khác.
- vm. $ watch / Vue. $ watch hiện có thể sử dụng cùng một định dạng với tùy
chọn component watch: {} .
- Xử lý lỗi hiện có thể nắm bắt các lỗi được đưa ra trong trình xử lý sự kiện tùy
chỉnh.
- Vue.config.warnHandler cho phép bạn thêm một lệnh gọi lại tùy chỉnh cho các
cảnh báo trong chế độ phát triển.
- 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
16

-

Vue ln 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 .

Nâng cấp
-

Đối với người dùng TypeScript hiện tại, bạn sẽ cần phải nâng cấp lên ít nhất
TypeScript 2.4nếu bạn muốn sử dụng TypeScript với Vue 2.5.
Nếu bạn đang sử dụng nhập kiểu CommonJS ( require(...)), bạn sẽ cần chuyển
sang nhập kiểu ES ( import x from x). Bạn cũng có thể
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, vuerouter, 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
vì myProp.

Ví dụ:
Thành phần bình thường
<template>

{{myProp}}

</template>
Thành phần chức năng
17


<template functional>

{{props.myProp}}

</template>
-

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át
hà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.

Hỗ trợ phạm vi vị trí

-

Để xác định vị trí có phạm vi , trước đây bạn phải bọc nội dung trong một mẫu
với scopethuộc tính.
Kể từ Vue 2.5, bây giờ bạn có thể khai báo các vị trí trong phạm vi với slotscopethuộc tính thay thế thuộc tính hiện khơng được dùng nữa scope. Thuộc
tính này hiện có thể được sử dụng trên các thành phần và phần tử bình thường
mà khơng u cầu trình bao bọc mẫu.

Vì vậy, bạn có thể sử dụng
<template>
<div slot-scope="myScopedObj">
{{myScopedObj.thingy}}
// Contents
</div>
</template>
thay vì
<template>
<template scope="myScopedObj">
<div>
{{myScopedObj.thingy}}
18


// Contents
</div>
</template>
</template>
Khác
-

-

Các thuộc tính được tiêm bây giờ có thể khai báo các giá trị mặc định theo cách
tương tự như propscó thể.
Cá thể thành phần bây giờ được chuyển làm đối số đầu tiên cho hàm dữ liệu, có
nghĩa là bộ khởi tạo dữ liệu hàm mũi tên đã hoạt động tốt trở lại?
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 hồn tồ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.
19


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ờ đây
cũng ghi lại các lỗi bên trong v-ontrình xử lý. Ngồ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 tố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 q 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 q 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.
• Hồn ngun 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.
20


-

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
tại với API Tùy chọn mà khơng cần thay thế nó. API thành phần cung cấp khả
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ác
khai 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
21


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úp
hưở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.
Khả năng phản ứng
-

Trong Vue 2.0, khả năng phản ứng hoạt động theo cách mà nhà phát triển
không tiết lộ. Các chi tiết bị ẩn gây ra nhiều nhầm lẫn hơn mức đáng lẽ phải
có. Tính năng Vue 3.0 này đã được giải cứu bằng cách hỗ trợ một số cách quấn
các đối tượng để đảm bảo rằng chúng có phản ứng. Chúng có thể được bọc
bằng một hàm ref cho các loại vô hướng. Điều này giúp đọc và ghi trực tiếp
thuộc tính (nếu cần) với .value:

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>
<button @click="addCharacter">Add</button>
</div>
</template>
Nhiều phần tử gốc (cú pháp mẫu)
-

Trước đó trong Vue 2, thẻ mẫu chỉ có thể nhận một phần tử gốc. Ngay cả khi
chỉ với hai thẻ

, vẫn phải được đặt trong thẻ <div> để nó hoạt động. Với
Vue 3.0, hạn chế về phần tử gốc khơng cịn nữa. Cú pháp mẫu được đánh giá
cao bởi các phân đoạn của cộng đồng Vue phù hợp với HTML và CSS. Các
mẫu này cung cấp tối ưu hóa hiệu suất khi biên dịch thành các chức năng kết
xuất được tối ưu hóa để tận dụng cấu trúc dữ liệu cho các mục đích khác
22


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 Vue
cho 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 {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}}
-

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ông
tạ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:
v-bind:value="property"
v-on:input="property = $event.target.value"
/>
23


-

Một chỉ thị mơ hình V có thể hỗ trợ trong bộ tổng hợp cú pháp cho một liên kết
hai chiều trong các thành phần của chúng ta. Thật không may, bạn chỉ có thể có
một mơ hình v cho mỗi thành phần. Đây là một trong những tính năng của Vue
3.0. Nó cho phép bạn đặt tên thuộc tính v-model mà khơng có bất kỳ hạn chế
nào, khơng giống như Vue 2.0.

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 tồ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
mẹ. Cổng là một cách hiệu quả để xử lý các phương thức, cửa sổ bật lên và các
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 trong
giai đ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.

24


Vue 3 khơng thay đổi hồn tồn với Vue 2 nhưng khi hồ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.
Tạo ứng dụng

Đầu tiên, nhìn vào cách tạo một ứng dụng, bạn sẽ thấy sự khác biệt về cú pháp. Không
chỉ cú pháp mà bản chất cũng được thay đổi.
Vue 2 :

Vue 3:

Lý do cho sự thay đổi
Cấu hình tồn cục gây ra các vấn đề trong q 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 tồ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 tồ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.
Ví dụ:
Vue 2:

25