1. Giải thích về Vue.js, đặc điểm và lý do không tương thích với IE8 và các phiên bản thấp hơn
Vue.js là một framework tiến bộ được thiết kế để xây dựng giao diện người dùng, với hệ thống cốt lõi là cơ chế ràng buộc dữ liệu hai chiều
Vue.js là một framework MVVM, dựa trên cơ chế liên kết dữ liệu hai chiều. Khi dữ liệu thay đổi, Vue.js tự thực hiện các tính toán cần thiết
Đặc điểm: gọn nhẹ, điều khiển dựa trên dữ liệu, thành phần hóa (component), thân thiện với module
Vue.js sử dụng các tính năng của ECMAScript 5 mà IE8 không thể mô phỏng, và không có giải pháp thay thế
2. Nguyên lý hoạt động của cơ chế liên kết dữ liệu hai chiều trong Vue
Chủ yếu được thực hiện thông qua thuộc tính defineProperty của đối tượng Object, ghi đè hàm set và get của data
Vue.js thực hiện liên kết dữ liệu bằng cách chiếm giữ dữ liệu, với phương thức cốt lõi là sử dụng Object.defineProperty() để chiếm giữ thuộc tính
Khi thiết lập hoặc lấy giá trị, chúng ta có thể thêm các hàm kích hoạt khác vào phương thức get hoặc set để đạt được mục đích giám sát sự thay đổi dữ liệu
3. MVVM là gì, khác biệt với MVC
MVVM là viết tắt của Model-View-ViewModel
Model đại diện cho mô hình dữ liệu
View đại diện cho giao diện thành phần, chịu trách nhiệm chuyển đổi dữ liệu thành UI
ViewModel là đối tượng đồng bộ hóa View và Model (liên kết hai chiều)
Trong MVVM, View và Model không có kết nối trực tiếp mà tương tác thông qua ViewModel
Tương tác giữa Model và ViewModel là hai chiều, do đó có thể thao tác dữ liệu thông qua view và ngược lại
MVC là viết tắt của Model-View-Controller. Mục đích sử dụng MVC là tách Model và View
Khác biệt lớn nhất giữa MVVM và MVC là tự động đồng bộ hóa View và Model, tức là khi thuộc tính của Model thay đổi
Chúng ta không cần thao tác thủ công DOM để thay đổi View, mà thuộc tính tương ứng ở View sẽ tự động thay đổi
4. Hai yếu tố cốt lõi của Vue.js là gì
Tư duy điều khiển dữ liệu và tư duy thành phần hóa
5. Khác biệt giữa Vue và Angular
Liên kết hai chiều của Vue dựa trên getter/setter của ES5, trong khi Angular tự triển khai một bộ quy tắc biên dịch mẫu và cần kiểm tra "bẩn"
Vue cần một đối tượng el để khởi tạo, phạm vi hoạt động sau này cũng nằm trong el, trong khi Angular làm việc trên toàn bộ trang HTML
6. Nguyên lý hoạt động ở tầng thấp của Vue
Vue sử dụng mô hình m-v-vm (model-view-modelView), với modelView làm tầng trung gian cho liên kết và thay đổi dữ liệu hai chiều
-
Tạo cây DOM ảo thông qua document.createDocumentFragment()
-
Khi dữ liệu được giám sát thay đổi, sẽ bị chặn bởi Object.defineProperty để phát hiện sự thay đổi
-
Sự thay đổi dữ liệu được phát hiện, kích hoạt Watcher (người quan sát) thông qua mô hình phát hành - đăng ký
-
Cuối cùng, cập nhật giá trị của các phần tử trong DOM ảo, thay đổi giá trị của cây DOM được render, hoàn thành liên kết hai chiều
7. Giải thích ứng dụng trang đơn (SPA) với Vue.js, ưu nhược điểm
Ứng dụng trang đơn, mọi thao tác của người dùng đều diễn ra trên một trang duy nhất
Ưu điểm: không tải lại trang, trải nghiệm người dùng tốt, tài nguyên chỉ cần tải một lần, sử dụng tư duy thành phần hóa cấu trúc code chuẩn hóa, dễ sửa đổi và điều chỉnh
Nhược điểm: không thân thiện với công cụ tìm kiếm, không hỗ trợ các phiên bản trình duyệt cũ, thời gian tải trang đầu tiên tương đối dài, không thể sử dụng nút điều hướng của trình duyệt, cần tự triển chức năng tiến/lùi
8. So sánh React và Vue
Điểm giống nhau:
Cả hai đều hỗ trợ render phía máy chủ, điều khiển view dựa trên dữ liệu, quản lý trạng thái
Cả hai đều có DOM ảo, phát triển thành phần, truyền dữ liệu giữa thành phần cha-con qua props
Điểm khác nhau:
React nghiêm túc chỉ tập trung vào tầng C của MVC, trong khi Vue là mô hình MVVM
Về DOM ảo:
Vue theo dõi mối quan hệ phụ thuộc của mỗi thành phần, không cần render lại toàn bộ cây thành phần, trong khi React khi trạng thái ứng dụng thay đổi, tất cả thành phần đều được render lại
Về render view:
React sử dụng JSX để render vào DOM, Vue sử dụng template
Về liên kết dữ liệu:
Vue triển khai liên kết dữ liệu hai chiều, React có luồng dữ liệu một chiều
Về đối tượng state:
Trong React, state không thể thay đổi, cần sử dụng setState để cập nhật trạng thái
Trong Vue, state không bắt buộc, dữ liệu được quản lý bởi thuộc tính data trong đối tượng Vue
9. Lợi ích của thành phần hóa trong phát triển frontend
-
Tăng hiệu suất phát triển
-
Dễ dàng tái sử dụng
-
Phù hợp với phát triển nhóm
-
Dễ quản lý và bảo trì
10. Vòng đời của Vue.js, khi sử dụng keep-alive sẽ tăng thêm hai giai đoạn nào
Trước/sau khi tạo beforeCreate/created:
Giai đoạn beforeCreate, phần tử el và đối tượng data của Vue đều chưa được khởi tạo. Giai đoạn created, đối tượng data đã có nhưng el vẫn chưa
Trước/sau khi mount beforeMount/mounted:
Giai đoạn beforeMount, el và data đã được khởi tạo nhưng vẫn là DOM ảo trước khi mount. Giai đoạn mounted, Vue đã mount thành công và data được render
Trước/sau khi cập nhật beforeUpdate/updated:
Khi data thay đổi, kích hoạt beforeUpdate và updated. Ít được sử dụng
Trước/sau khi hủy beforeDestroy/destroyed:
beforeDestroy được kích hoạt trước khi Vue instance bị hủy, thường ở đây cần removeEventListener để giải bỏ các sự kiện đã bind
Sau khi destroy, Vue instance đã ngừng lắng nghe sự kiện và binding DOM, nhưng cấu trúc DOM vẫn tồn tại
Trong các thành phần/route được bao bởi keep-alive, sẽ có thêm hai hook:
activated và deactivated
11. Hiểu về cơ chế kiểm tra "bẩn" trong Angular
Trong Angular không thể xác định dữ liệu đã thay đổi hay chưa, nên đặt ra một số điều kiện, khi kích hoạt các điều kiện này sẽ thực hiện một kiểm tra để duyệt tất cả dữ liệu, so sánh nơi đã thay đổi và thực hiện sự thay đổi
Cơ chế kiểm tra này không khoa học và hiệu quả thấp, có nhiều phần thừa
12. Làm thế nào để CSS chỉ có tác dụng trong thành phần hiện tại
Muốn CSS chỉ có hiệu lực trong thành phần hiện tại, thêm scoped trong style
13. Khác biệt giữa v-if và v-show trong Vue
v-if và v-show đều được dùng để điều khiển việc render phần tử
v-if dựa trên giá trị thật/giả của dữ liệu sau đó để quyết định thêm/xóa DOM
v-show chỉ sửa đổi thuộc tính css (display)
v-if nếu điều kiện render ban đầu là thật thì render, ngược lại thì không
v-show dù điều kiện ban đầu có thật hay không đều được render
v-if có chi phí chuyển đổi cao, không phù hợp với việc chuyển đổi thường xuyên
v-show có chi phí render ban đầu cao, phù hợp với việc chuyển đổi thường xuyên
14. Các modifier trong Vue là gì
Modifier sự kiện: stop, prevent, self, once
Modifier bàn phím: enter, space, up, down
Modifier form: number, trim, lazy
15. Liệt kê các directive thường dùng trong Vue
v-if, v-show, v-for, v-on, v-bind, v-model, v-once
16. v-on có thể bind nhiều phương pháp cùng lúc không
Có thể
<input @keyup.enter="guiDuLieu" @focus="trungTam">
17. Khác biệt giữa $mount và el trong Vue
$mount và el không có sự khác biệt khi sử dụng, đều dùng để mount instance Vue đã khởi tạo vào phần tử DOM chỉ định
Nếu khởi tạo Vue với el, Vue sẽ render trong DOM tương ứng với el
Nếu không chỉ định el, instance Vue sẽ ở trạng thái "chưa mount", lúc này dùng $mount để thực hiện mount thủ công
18. Cách sử dụng event modifier trong Vue, ví dụ minh họa
<!-- Ngăn chặn sự kiện click lan truyền -->
<a @click.stop="lamDieuNay"></a>
<!-- Sự kiện submit không tải lại trang -->
<form @submit.prevent="onSubmit"></form>
<!-- Modifier có thể kết nối chuỗi -->
<a @click.stop.prevent="lamDoDo"></a>
<!-- Chỉ sử dụng modifier -->
<form @submit.prevent></form>
<!-- Sự kiện click chỉ kích hoạt một lần -->
<a @click.once="lamDieuNay"></a>
<!-- Chỉ kích hoạt khi event.target là chính element đó -->
<div @click.self="lamDoDo">...</div>
19. Tác dụng của key và is trong Vue
Sử dụng key, Vue sẽ sắp xếp lại thứ tự phần tử dựa trên sự thay đổi của key, và loại bỏ các phần tử không có key. Có thể tối ưu hóa
is có thể mở rộng HTML element gốc, cũng có thể bind thành phần động
20. Tại sao data trong component phải là hàm
Vì component được sử dụng để tái sử dụng, trong JS đối tượng là quan hệ tham chiếu, như vậy không có cách ly phạm vi
Trong khi instance của new Vue, không được tái sử dụng, vì vậy không có vấn đề tham chiếu đối tượng
21. Khái niệm luồng dữ liệu một chiều
Khái niệm này xuất hiện trong giao tiếp giữa các component. Dữ liệu流向 từ component cha đến con, dữ liệu vẫn thuộc về component cha
Nếu muốn thao tác ở component con để thay đổi dữ liệu của component cha, chỉ có thể cho component cha biết cần thao tác dữ liệu nào
Sau đó component cha tự sửa đổi dữ liệu của mình, xong rồi truyền lại cho component con
22. Tính toán (computed) trong Vue là gì, có những cách sử dụng nào
computed là thuộc tính tính toán, có thể giám sát sự thay đổi dữ liệu trong Vue, khi dữ liệu thay đổi sẽ kích hoạt
- Dạng hàm
computed:{
ngheMang(){
// Sử dụng dữ liệu trong data, tự động giám sát sự thay đổi dữ liệu
// Kết quả trả về là một việc khác được thực hiện khi thay đổi dữ liệu
}
}
- Dạng đối tượng
computed:{
ngheMang:{
get(){
// Khi lấy giá trị
},
set(giaTriMoi){
// Khi sửa đổi giá trị
}
}
}
// Khi sử dụng get set, computed định nghĩa một thuộc tính dạng đối tượng
// Không sử dụng get set, computed định nghĩa một thuộc tính có thể là hàm
23. Cách truyền dữ liệu giữa các component trong Vue
Component cha truyền cho component con:
Đầu tiên, trên component con thêm v-bind:tên-thuộc-tính-bắt-tự = dữ liệu của component cha, component con nhận dữ liệu qua props
Component con truyền cho component cha:
Trên component con bind một sự kiện tùy chỉnh và truyền hàm xử lý sự kiện của component cha
Trong component con, sử dụng $emit để lắng nghe sự kiện tùy chỉnh này, this.$emit('tên-sự-kiện', tham-số)
24. Khác biệt giữa computed và watch trong Vue
computed có thể giám sát sự thay đổi dữ liệu trong Vue, thực hiện một lần khi trang tải, mỗi lần dữ liệu thay đổi lại kích hoạt, khi thao tác dữ liệu sẽ sinh ra một việc khác
watch chỉ kích hoạt khi dữ liệu chỉ định thay đổi. Ban đầu không kích hoạt, chỉ khi dữ liệu chỉ định thay đổi thì kích hoạt
watch có thể thêm deep (sâu), computed không thể
25. Hiểu về nextTick trong Vue
nextTick trong Vue có thể lấy được phần tử DOM đã được cập nhật
Nếu trong mounted không thể lấy chính xác phần tử DOM, có thể sử dụng nextTick
Các thao tác DOM trong hook created() của vòng đời Vue phải đặt trong hàm callback của Vue.nextTick()
26. Phương pháp định nghĩa directive tùy chỉnh (v-check, v-focus) là gì? Có những hook nào? Tham số của hook là gì
Định nghĩa directive toàn cục: trong phương thức directive của đối tượng Vue có hai tham số, lần lượt là tên directive và hàm
Định nghĩa directive trong component: directives
Hook: bind (khi sự kiện được bind), inserted (khi node được chèn), update (khi component liên quan cập nhật)
Tham số hook: el, binding
27. Tối ưu hóa tốc độ tải trang đầu tiên của ứng dụng SPA
-
Nhập các thư viện JS chung thông qua thẻ script bên ngoài, để trình duyệt tải song song tài nguyên, tăng tốc độ tải
-
Khi cấu hình route, sử dụng lazy loading cho trang và component, chỉ tải file js tương ứng khi gọi component
-
Thêm loading trang đầu tiên để nâng cao trải nghiệm người dùng
28. Trình bày tác dụng của các modifier trim, number, lazy trong Vue
trim: dùng để lọc khoảng trắng trước và sau
number: bind dữ liệu người dùng nhập vào dạng number
lazy: sử dụng modifier này sẽ đồng bộ từ "sự kiện input" thành "sự kiện change"
29. Vue-router có những navigation hook nào, chúng có tham số gì
Hook điều hướng toàn cục: to, from, next
Hook trong component: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
Hook riêng của từng route: beforeEnter
30. Cách chuyển đổi giữa các route
Khai báo (sử dụng tag) <router-link :to="xxx">
Lập trình (sử dụng js) router.push('index')
31. Giải thích về lazy loading (tải theo yêu cầu route)
Trong webpack cung cấp require.ensure() để thực hiện tải theo yêu cầu. Trước đây nhập route bằng cách import, thay bằng cách định nghĩa bằng const
Cách nhập không tải trang theo yêu cầu:
import trangChu from '../common/trangChu.vue'
Cách nhập tải trang theo yêu cầu:
const trangChu = r => require.ensure( [], () => r (require('../common/trangChu.vue')))
32. Khác biệt giữa $router và $route trong Vue
router là một đối tượng của VueRouter, thông qua Vue.use(VueRouter) và hàm khởi tạo VueRouter để có instance router
route là một đối tượng route, mỗi route sẽ có một route object
Là một đối tượng cục bộ, có thể lấy name, path, params, query tương ứng
33. vue-loader là gì? Mục đích sử dụng là gì
Loader cho file .vue, chuyển đổi template/js/style thành module js
Mục đích: js có thể viết es6, style có thể scss hoặc less, template có thể thêm jade
34. Khác biệt giữa query và params trong vue-router
Cả query và params đều dùng để truyền tham số trong route của Vue
query dùng path để nhập, params chỉ có thể dùng name để truyền, không thể dùng path
query giống như yêu cầu get (tham số hiển thị trong thanh địa chỉ), trong khi params giống như post (không hiển thị tham số trong thanh địa chỉ)
35. Cách định nghĩa route động trong vue-router? Lấy tham số động truyền vào
Trong file index.js của thư mục router, thêm /:id vào thuộc tính path
Sử dụng params.id của đối tượng router
36. Cách định nghĩa route lồng nhau
Sử dụng cấu hình children trong tham số VueRouter, children chứa route con, route con còn có thể tiếp tục lồng route con
37. active-class là thuộc tính của component nào
Component router-link trong module vue-router
38. Ví dụ về các đối tượng route thường dùng trong Vue và tác dụng
$route.name tên route hiện tại
$route.path đường dẫn của đối tượng route hiện tại
$route.meta chèn một trường trong route, khi chuyển route sẽ truyền thông tin qua
$route.query thông tin truy vấn chứa cặp key-value trong route
$route.hash giá trị hash của đường dẫn hiện tại, có #
$route.params biến được định sẵn, khi chuyển route truyền qua parmas một giá trị id
39. Trong dự án vue.cli, công dụng của mỗi thư mục và file trong thư mục src
main.js là file入口
app.vue là component chính
view chứa trang giao diện
components chứa component
router chứa cấu hình route
assets chứa tài nguyên tĩnh
40. Trong vue.cli, cách sử dụng component tùy chỉnh
Bước 1: Tạo file component mới trong thư mục components
Bước 2: Nhập component vào trang (component) cần sử dụng
Bước 3: Inject vào thuộc tính components của component con
Bước 4: Sử dụng trong template view
41. Vòng đời của Vue.js là gì, tác dụng gì, lần tải trang đầu tiên kích hoạt những hook nào
Quá trình từ tạo đến hủy của Vue instance
Từ khi bắt đầu tạo, khởi tạo dữ liệu, biên dịch template, mount DOM→render, cập nhật→render, hủy等一系列过程，称为 Vue 的生命周期
Tác dụng: Vòng đời có nhiều sự kiện hook, giúp chúng ta dễ dàng kiểm soát quá trình tạo instance Vue hơn
Lần tải trang đầu tiên sẽ kích hoạt beforeCreate, created, beforeMount, mounted
42. Mô tả ngắn gọn mỗi chu kỳ phù hợp với kịch bản nào
beforecreate : có thể thêm loading event, kích hoạt khi tải instance
created : thao tác khi khởi tạo xong, như kết thúc loading event, cũng có thể thao tác request bất đồng bộ
mounted : mount element, lấy được DOM node, khuyến nghị sử dụng nextTick
updated : nếu xử lý dữ liệu thống nhất, viết hàm tương ứng ở đây
beforeDestroy : có thể tạo hộp xác nhận dừng event, tắt timer
destroyed : component hiện tại đã bị xóa, dọn sạch nội dung liên quan
43. Giải thích về slot trong Vue
Slot là API phân phối nội dung mà Vue triển khai, là nơi chứa nội dung được phân phối.
Trong template component, mặc định chiếm một vị trí, khi sử dụng tag component, nội dung của tag component sẽ tự động thay thế nội dung đó
Trong slot có thể đặt một số nội dung mặc định, nếu truyền nội dung sẽ thay thế, tag không tên sẽ mặc định đặt vào default
44. Khi computed và watch là đối tượng, chúng có những tùy chọn nào? computed và methods có gì khác nhau? computed có thể phụ thuộc dữ liệu của component khác không?
computed có hai tùy chọn get set
watch có handler, deep (có sâu), immediate (có thực thi ngay)
methods là một đối tượng, có thể định nghĩa các phương thức trong đó, có thể nhận tham số, computed không
computed có thể cache, methods không
computed có thể phụ thuộc computed khác, thậm chí data của component khác
45. Cách hiểu hàm render trong Vue
Vue thường sử dụng template để tạo HTML, đôi khi chúng ta cần sử dụng javascript để tạo HTML, lúc này cần sử dụng hàm render
Hàm render return một createElement, các phần tử con trong component được lưu trong instance component
createElement trả về thông tin sẽ cho VUE biết cần render loại node nào trên trang. Chúng ta gọi node này là DOM ảo
46. Vuex là gì? Cách sử dụng? Trường hợp chức năng nào sử dụng nó?
Vuex là công cụ quản lý trạng thái trong framework Vue
Nhập store trong main.js, inject, tạo một thư mục store, export
Trường hợp sử dụng: trong ứng dụng trang đơn, trạng thái giữa các component. Trình phát nhạc, trạng thái đăng nhập, thêm vào giỏ hàng
47. Trong hook created() của vòng đời Vue, thao tác DOM phải đặt trong callback của Vue.nextTick(). Lý do là gì
Khi hook created() thực thi, DOM thực tế chưa được render, lúc này thao tác DOM vô nghĩa
Do đó, thao tác cần sử dụng cấu trúc DOM thay đổi theo dữ liệu, sau khi dữ liệu thay đổi, thao tác này nên đặt trong callback của Vue.nextTick()
48. Đặc điểm của store trong Vuex là gì
Vuex là một kho, trong kho chứa nhiều đối tượng
Trong đó state là nguồn dữ liệu, tương ứng với data trong đối tượng Vue thông thường
Dữ liệu trong state là phản ứng (reactive), khi component đọc dữ liệu từ store, nếu dữ liệu trong store thay đổi, component phụ thuộc cũng thay đổi
Nó sử dụng mapState để ánh xạ state và getters toàn cục vào computed của component hiện tại
49. Trong Vue, code request ajax nên viết trong methods của component hay action của vuex?
Nếu dữ liệu request không được các component khác sử dụng chung, chỉ sử dụng trong component request, thì không cần đặt vào state của vuex
Nếu được các nơi khác sử dụng, hãy đặt request vào action để tiện tái sử dụng và đóng gói thành promise trả về
50. Giải thích tư tưởng của Vuex
Tư tưởng của Vuex là khi chúng ta click một nút trên trang, nó sẽ kích hoạt(dispatch) một action, action sau đó thực hiện(commit) một mutation, mutation ngay lập tức thay đổi state,
state thay đổi, trang của chúng ta lấy dữ liệu từ state, trang sẽ thay đổi. Đối tượng Store chứa tất cả các nội dung chúng ta đang nói, action, state, mutation