Tài liệu 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.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 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à: + 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 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 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 - 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 [email protected] 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 : 6 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. - 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 . 7 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. - - 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. (

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 ( ) thay thế hoặc chỉ cần đóng thẻ theo cách thủ công. 8 - 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 , 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 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 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. 9 - 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ụ: Định nghĩa thành phần : 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ụ: 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ụ: 11

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. 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 vue- 12 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 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ụ: 13 - Để 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. - 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 14 - 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 . 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ụ: 15

- Xem thêm -