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:
Võ Thị Tường Vân

MSSV: 3117410294

Lữ Kiều Hoa

MSSV: 3117410082

Lê Thanh Nhàn

MSSV: 3117410169

Nguyễn Trung Tiến

MSSV: 3117410254

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


MỤC LỤC

I. TỔNG QUAN

1

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

ĐÁNH GIÁ

IV. TÀI LIỆU THAM KHẢO

119
120


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

1


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
2


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.

3


-

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
4

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
5


I.5.1 Các tính năng của Vue 2.1.0
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'
6


}
-

Đ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: -->
<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>

7


-

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>

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


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.
- 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.
- Ngồ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.

9

-

-

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


<script>
export default {
props: {
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>

11


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


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.

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


-

Để 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">
<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ữ.
Ngoà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.
14


-

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
-

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


-

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
<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}}
16


// Contents
</div>
</template>
thay vì

<template>
<template scope="myScopedObj">
<div>
{{myScopedObj.thingy}}
// 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.
17


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.
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 tồ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 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.
18


 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. Ngồ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.
19


-

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 xun 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ú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:

20