title: Vue相關問題
date: 2019-10-12 20:23:00
updated: 2019-10-12 20:23:00
tags: ['web前端面試']
Vue相關問題
1. Vue.js介紹
Vue.js是一個輕巧市怎、高性能沼撕、可組件化的MVVM庫载迄，同時擁有非常容易上手的API；
Vue.js是一個構建數(shù)據(jù)驅(qū)動的Web界面的庫暇矫。
Vue.js是一套構建用戶界面的 漸進式框架并级。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設計。Vue的核心庫只關注視圖層，并且非常容易學習盗誊，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅(qū)動采用單文件組件和 Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復雜單頁應用哈踱。數(shù)據(jù)驅(qū)動+組件化的前端開發(fā)荒适。
簡而言之：Vue.js是一個構建數(shù)據(jù)驅(qū)動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件开镣。核心是一個響應的數(shù)據(jù)綁定系統(tǒng)刀诬。
2. 談談你對vue的雙向數(shù)據(jù)綁定原理的理解
vue.js是采用數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式，通過 Object.definePorperty() 來劫持各個屬性的setter邪财，getter陕壹，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調(diào)树埠。
MVVM作為數(shù)據(jù)綁定的入口糠馆，整合Observer，Compile和Watcher三者怎憋，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化又碌，通過Compile來解析編譯模板指定（解析{{}}），最終利用Watcher搭起Observer和Compile之間的通信橋梁盛霎，達到數(shù)據(jù)變化->視圖更新赠橙；視圖交互變化input->數(shù)據(jù)model變更的雙向綁定效果
3. vue中常用的指令
v-for 、 v-if 愤炸、v-bind期揪、v-on、v-show规个、v-else
4.v-if 和 v-show 區(qū)別
v-if按照條件是否渲染凤薛，v-show是display的block或none
5. MVVM 關鍵要素分析
- 響應式：vue 中的 data 數(shù)據(jù)，隨便一改動诞仓，視圖就能隨著變化——如何監(jiān)聽這個變化的呢缤苫？
- 模板解析：模板看似是 html 但是它不是，因為它有指令墅拭，因此它是有邏輯的活玲、動態(tài)的，而 html 只是靜態(tài)的
- 渲染：頁面一加載的顯示谍婉，以及 data 變化之后的顯示舒憾，如何做到的？特別是 rerender 穗熬，不能變化一點數(shù)據(jù)镀迂，頁面全部都重新渲染。
6.vuex五個核心屬性
https://blog.csdn.net/wh710107079/article/details/88181015
state, getters, mutations, actions, modules
主要包括以下幾個模塊：
- State：定義了應用狀態(tài)的數(shù)據(jù)結構唤蔗，可以在這里設置默認的初始狀態(tài)探遵。
- Getter：允許組件從 Store 中獲取數(shù)據(jù)窟赏，mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計算屬性。
- Mutation：是唯一更改 store 中狀態(tài)的方法箱季，且必須是同步函數(shù)涯穷。
- Action：用于提交 mutation，而不是直接變更狀態(tài)规哪，可以包含任意異步操作求豫。
- Module：允許將單一的 Store 拆分為多個 store 且同時保存在單一的狀態(tài)樹中塌衰。
7. Vue 中 computed诉稍、methods、watch三者的區(qū)別
https://blog.csdn.net/ly124100427/article/details/81328225
8. vue數(shù)據(jù)雙向綁定原理
Vue內(nèi)部通過Object.defineProperty方法屬性攔截的方式最疆，把data對象里每個數(shù)據(jù)的讀寫轉(zhuǎn)化成getter/setter杯巨，當數(shù)據(jù)變化時通知視圖更新
var obj = {}
var _name = '咱三'
Object.defineProperty(obj, "name", {
get: function() {
console.log('get')
return _name
},
set: function(newVal) {
console.log('set')
_name = newVal
}
})
console.log(obj.name)
obj.name = 'lisi'
9. vue路由
-
vue路由的兩種模式，hash與history
對于Vue 這類漸進式前端開發(fā)框架努酸，為了構建SPA（單頁面應用）服爷，需要引入前端路由系統(tǒng)，這也就是Vue-router存在的意義获诈。前端路由的核心仍源，就在于——— 改變視圖的同時不會向后端發(fā)出請求。
一舔涎、為了達到這個目的笼踩，瀏覽器提供了以下兩種支持：
1、hash ——即地址欄URL中的#符號（此hsah 不是密碼學里的散列運算）亡嫌。
比如這個URL：http://www.abc.com/#/hello, hash 的值為#/hello嚎于。它的特點在于：hash 雖然出現(xiàn)URL中，但不會被包含在HTTP請求中挟冠，對后端完全沒有影響于购，因此改變hash不會重新加載頁面。
2知染、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法肋僧。（需要特定瀏覽器支持）
這兩個方法應用于瀏覽器的歷史記錄站，在當前已有的back控淡、forward嫌吠、go 的基礎之上，它們提供了對歷史記錄進行修改的功能逸寓。只是當它們執(zhí)行修改是居兆，雖然改變了當前的URL，但你瀏覽器不會立即向后端發(fā)送請求竹伸。
history模式泥栖，會出現(xiàn)404 的情況簇宽，需要后臺配置。
二吧享、404 錯誤
1魏割、hash模式下，僅hash符號之前的內(nèi)容會被包含在請求中钢颂，如 http://www.abc.com, 因此對于后端來說钞它，即使沒有做到對路由的全覆蓋，也不會返回404錯誤殊鞭；
2遭垛、history模式下，前端的url必須和實際向后端發(fā)起請求的url 一致操灿，如http://www.abc.com/book/id 锯仪。如果后端缺少對/book/id 的路由處理，將返回404錯誤趾盐。
-
router跳轉(zhuǎn)方法
router.push(location, onComplete?, onAbort?) router.replace(location, onComplete?, onAbort?) router.go(n) -
router傳遞參數(shù)
// url/:id/:name router.push({'name':'routerName', 'params':{'id':'1', 'name':'lxl'}) // 獲取參數(shù)方式 let id = this.$route.params.id; // url?id=1&name=lxl router.push({'path':'/resigner', 'query':{'id':'1', 'name':'lxl'}) // 獲取參數(shù)方式 let id = this.$route.query.id;
10. 說一下對mvvm的理解
* MVVM --- Model -View- ViewModel
* 三者之間的聯(lián)系庶喜，以及如何對應到各段代碼
* ViewModel的理解，聯(lián)系View和Model
11. vue中如何實現(xiàn)響應式
* 關鍵理解Object.defineProperty
* 將data的屬性代理到vm上
12. vue中如何解析模板
* 模板：字符串救鲤，有邏輯久窟，遷入js變量
* 模板必須轉(zhuǎn)換為js代碼（有邏輯，渲染html本缠，js變量）
* render函數(shù)是什么樣子的
* render函數(shù)執(zhí)行是返回vnode
* updateComponent
13. vue的整個流程
* 第一步斥扛，解析模板成render函數(shù)
* 第二步，響應式開始監(jiān)聽
* 第三步搓茬，首次渲染犹赖，顯示頁面，且綁定依賴
* 第五步卷仑，data屬性變化峻村，觸發(fā)render
14.談談你對 Vue 生命周期的理解？
（1）生命周期是什么锡凝？
Vue 實例有一個完整的生命周期粘昨，也就是從開始創(chuàng)建、初始化數(shù)據(jù)窜锯、編譯模版张肾、掛載 Dom -> 渲染、更新 -> 渲染锚扎、卸載等一系列過程吞瞪，我們稱這是 Vue 的生命周期。
（2）各個生命周期的作用
| 生命周期 | 描述 |
|---|---|
| beforeCreate | 組件實例被創(chuàng)建之初驾孔，組件的屬性生效之前 |
| created | 組件實例已經(jīng)完全創(chuàng)建芍秆，屬性也綁定惯疙，但真實 dom 還沒有生成，$el 還不可用 |
| beforeMount | 在掛載開始之前被調(diào)用：相關的 render 函數(shù)首次被調(diào)用 |
| mounted | el 被新創(chuàng)建的 vm.$el 替換妖啥，并掛載到實例上去之后調(diào)用該鉤子 |
| beforeUpdate | 組件數(shù)據(jù)更新之前調(diào)用霉颠，發(fā)生在虛擬 DOM 打補丁之前 |
| update | 組件數(shù)據(jù)更新之后 |
| activited | keep-alive 專屬，組件被激活時調(diào)用 |
| deadctivated | keep-alive 專屬荆虱，組件被銷毀時調(diào)用 |
| beforeDestory | 組件銷毀前調(diào)用 |
| destoryed | 組件銷毀后調(diào)用 |
補充： Vue / keep-alive
http://www.reibang.com/p/4b55d312d297
15. 在什么階段才能訪問操作DOM蒿偎？
在鉤子函數(shù) mounted 被調(diào)用前，Vue 已經(jīng)將編譯好的模板掛載到頁面上怀读，所以在 mounted 中可以訪問操作 DOM诉位。
16. 使用Vue的好處
vue兩大特點：響應式編程、組件化
vue的優(yōu)勢：輕量級框架愿吹、簡單易學不从、雙向數(shù)據(jù)綁定惜姐、組件化犁跪、視圖、數(shù)據(jù)和結構的分離歹袁、虛擬DOM坷衍、運行速度快
17. vue 性能優(yōu)化
- 使用CDN資源,減小服務器帶寬壓力
- 路由懶加載
- 將一些靜態(tài)js css放到其他地方（如OSS），減小服務器壓力
- 按需加載三方資源条舔，如iview,建議按需引入iview中的組件
- 使用nginx開啟gzip減小網(wǎng)絡傳輸?shù)牧髁看笮?/li>
- 若首屏為登錄頁枫耳，可以做成多入口，登錄頁單獨分離為一個入口
- 無狀態(tài)的組件用函數(shù)式組件
- 使用uglifyjs-webpack-plugin插件代替webpack自帶UglifyJsPlugin插件
- 子組件分割（第二個是拆分成子組件孟抗，因為 Vue 的更新是組件粒度的迁杨，雖然第次數(shù)據(jù)變化都會導致父組件的重新渲染，但是子組件卻不會重新渲染凄硼，因為它的內(nèi)部沒有任何變化铅协，耗時任務自然也就不會重新執(zhí)行，因此性能更好）
- 事件的銷毀
- 圖片懶加載
18. VUE路由的hash模式與history模式的區(qū)別
https://blog.csdn.net/onlyhqm/article/details/85342532
https://blog.csdn.net/lyn1772671980/article/details/80804419
19. vue路由實現(xiàn)原理
https://segmentfault.com/a/1190000014822765?utm_source=tag-newest
20. 使用vue打包摊沉，vendor文件過大狐史，或者是app.js文件很大https://www.cnblogs.com/wjunwei/p/9242142.html
21. vue路由懶加載及組件懶加載
https://www.cnblogs.com/-roc/p/9983177.html
22.VUE 組件通迅有哪些方式？
https://blog.csdn.net/mashibing_web/article/details/110821646
23. 使用vuex狀態(tài)管理说墨，刷新頁面后會不會丟失
會骏全，可以解決，使用插件vue-savedata
24. 介紹一下diff算法
https://www.cnblogs.com/wind-lanyan/p/9061684.html
25. mixin和mixins區(qū)別
mixin用于全局混入尼斧，會影響到每個組件實例姜贡，通常插件都是這樣做初始化的。
Vue.mixin({
beforeCreate(){
// 會影響到每個組件的beforeCreate鉤子函數(shù)
}
})
mixins最常用的擴展組件的方式棺棵。如果多個組件有相同的業(yè)務邏輯楼咳，就可將這些邏輯剝離出來潘悼，通過mixins混入代碼。需要注意：mixins混入的鉤子函數(shù)會先于組件內(nèi)的鉤子函數(shù)執(zhí)行爬橡，并且在遇到同名選項的時候也會有選擇性的進行合并治唤。
vue中mixins的使用方法和注意點（詳）
https://www.cnblogs.com/Ivy-s/p/9937173.html
26. VUE路由的hash模式與history模式的區(qū)別
https://blog.csdn.net/onlyhqm/article/details/85342532
https://blog.csdn.net/lyn1772671980/article/details/80804419
27. vue 的單向數(shù)據(jù)流
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行糙申。這樣會防止從子組件意外變更父級組件的狀態(tài)宾添，從而導致你的應用的數(shù)據(jù)流向難以理解。
額外的柜裸，每次父級組件發(fā)生變更時缕陕，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內(nèi)部改變 prop疙挺。如果你這樣做了扛邑，Vue 會在瀏覽器的控制臺中發(fā)出警告。
這里有兩種常見的試圖變更一個 prop 的情形：
- 這個 prop 用來傳遞一個初始值铐然；這個子組件接下來希望將其作為一個本地的 prop 數(shù)據(jù)來使用蔬崩。
在這種情況下，最好定義一個本地的 data property 并將這個 prop 用作其初始值：
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
- 這個 prop 以一種原始的值傳入且需要進行轉(zhuǎn)換搀暑。 在這種情況下沥阳，最好使用這個 prop 的值來定義一個計算屬性：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
28. 為什么說vue沒有完全遵循mvvm
mvvm是指 模型-視圖-視圖模型，雙向綁定自点，數(shù)據(jù)交互通過vm來實現(xiàn)
vue主題也是按照這樣的設計模式的桐罕。只去改變數(shù)據(jù)。通過雙向綁定桂敛，自動更新視圖功炮。
但是vue中添加了一個屬 : $ref
通過ref可以拿到dom對象，通過ref直接去操作視圖术唬。這一點上薪伏，違背了mvvm
29. vue 的異步操作在哪里執(zhí)行
30. vue 的動態(tài)路由
注意： 一個“路徑參數(shù)”使用冒號 : 標記。當匹配到一個路由時碴开，參數(shù)值會被設置到 this.$route.params毅该，可以在每個組件內(nèi)使用。
我們經(jīng)常需要把某種模式匹配到的所有路由潦牛，全都映射到同個組件眶掌。例如，我們有一個展示商品的組件巴碗，對于所有 上架狀態(tài) 各不相同的商品朴爬，都要使用這個組件來渲染。那么橡淆，我們可以在 vue-router 的路由路徑中使用“動態(tài)路徑參數(shù)”(dynamic segment) 來達到這個效果：
const routes = [
{
path: "/",
component: () => import("@/views/Main.vue"),
redirect: "/index",
children: [
{
path: "/index/:id",
component: () => import("@/views/Index.vue"),
},
],
},
];
