站長資訊網(wǎng)本篇文章給大家總結(jié)分享一些Vue面試題（附答案解析），帶你梳理基礎(chǔ)知識，增強(qiáng)Vue知識儲備，值得收藏，快來看看吧！
（學(xué)習(xí)視頻分享：vue視頻教程）
一、Vue.js基本問題
1.1.Vue 響應(yīng)式原理
核心實(shí)現(xiàn)類:
Observer : 它的作用是給對象的屬性添加 getter 和 setter，用于依賴收集和派發(fā)更新
Dep : 用于收集當(dāng)前響應(yīng)式對象的依賴關(guān)系,每個響應(yīng)式對象包括子對象都擁有一個 Dep 實(shí)例（里面 subs 是 Watcher 實(shí)例數(shù)組）,當(dāng)數(shù)據(jù)有變更時,會通過 dep.notify()通知各個 watcher。
Watcher : 觀察者對象 , 實(shí)例分為渲染 watcher (render watcher),計算屬性 watcher (computed watcher),偵聽器 watcher（user watcher）三種
Watcher 和 Dep 的關(guān)系:
watcher 中實(shí)例化了 dep 并向 dep.subs 中添加了訂閱者,dep 通過 notify 遍歷了 dep.subs 通知每個 watcher 更新。
依賴收集:
initState 時,對 computed 屬性初始化時,觸發(fā) computed watcher 依賴收集
initState 時,對偵聽屬性初始化時,觸發(fā) user watcher 依賴收集
render()的過程,觸發(fā) render watcher 依賴收集
re-render 時,vm.render()再次執(zhí)行,會移除所有 subs 中的 watcer 的訂閱,重新賦值。
派發(fā)更新:
組件中對響應(yīng)的數(shù)據(jù)進(jìn)行了修改,觸發(fā) setter 的邏輯
調(diào)用 dep.notify()
遍歷所有的 subs（Watcher 實(shí)例）,調(diào)用每一個 watcher 的 update 方法。
原理:
當(dāng)創(chuàng)建 Vue 實(shí)例時,vue 會遍歷 data 選項的屬性,利用 Object.defineProperty 為屬性添加 getter 和 setter 對數(shù)據(jù)的讀取進(jìn)行劫持（getter 用來依賴收集,setter 用來派發(fā)更新）,并且在內(nèi)部追蹤依賴,在屬性被訪問和修改時通知變化。
每個組件實(shí)例會有相應(yīng)的 watcher 實(shí)例,會在組件渲染的過程中記錄依賴的所有數(shù)據(jù)屬性（進(jìn)行依賴收集,還有 computed watcher,user watcher 實(shí)例）,之后依賴項被改動時,setter 方法會通知依賴與此 data 的 watcher 實(shí)例重新計算（派發(fā)更新）,從而使它關(guān)聯(lián)的組件重新渲染。
一句話總結(jié):
vue.js 采用數(shù)據(jù)劫持結(jié)合發(fā)布-訂閱模式,通過 Object.defineproperty 來劫持各個屬性的 setter,getter,在數(shù)據(jù)變動時發(fā)布消息給訂閱者,觸發(fā)響應(yīng)的監(jiān)聽回調(diào)
1.2.Vue.js 的特點(diǎn)
易用： 簡單，易學(xué)，上手快
靈活： （漸進(jìn)式）不斷繁榮的生態(tài)系統(tǒng)，可以在一個庫和一套完整框架之間自如伸縮。
高效： 20kB min+gzip 運(yùn)行大小；超快虛擬 DOM；最省心的優(yōu)化
雙向綁定：開發(fā)效率高
基于組件的代碼共享
Web項目工程化，增加可讀性、可維護(hù)性
1.3. Vue.js 雙向綁定的原理
Vue.js 2.0 采用數(shù)據(jù)劫持（Proxy 模式）結(jié)合發(fā)布者-訂閱者模式（PubSub 模式）的方式，通過 Object.defineProperty()來劫持各個屬性的 setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
每個組件實(shí)例都有相應(yīng)的watcher程序?qū)嵗鼤诮M件渲染的過程中把屬性記錄為依賴，之后當(dāng)依賴項的setter被調(diào)用時，會通知watcher重新計算，從而致使它關(guān)聯(lián)的組件得以更新。
Vue.js 3.0, 放棄了Object.defineProperty ，使用更快的ES6原生 Proxy (訪問對象攔截器, 也稱代理器)
步驟：
1.需要observe的數(shù)據(jù)對象進(jìn)行遞歸遍歷，包括子屬性對象的屬性，都加上setter和getter這樣的話，給這個對象的某個值賦值，就會觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化
2.compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖
3.Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是: ①在自身實(shí)例化時往屬性訂閱器(dep)里面添加自己 ②自身必須有一個update()方法 ③待屬性變動dep.notice()通知時，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。
4.MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果。
1.4.Vue中如何監(jiān)控某個屬性值的變化？
比如現(xiàn)在需要監(jiān)控data中， obj.a 的變化。Vue中監(jiān)控對象屬性的變化你可以這樣：
watch: { obj: { handler (newValue, oldValue) { console.log('obj changed') }, deep: true }
deep屬性表示深層遍歷，但是這么寫會監(jiān)控obj的所有屬性變化，并不是我們想要的效果，所以做點(diǎn)修改：
watch: { 'obj.a': { handler (newName, oldName) { console.log('obj.a changed') } } }
還有一種方法，可以通過computed 來實(shí)現(xiàn)，只需要：
computed: { a1 () { return this.obj.a } }
利用計算屬性的特性來實(shí)現(xiàn)，當(dāng)依賴改變時，便會重新計算一個新值。
1.5.Vue.js 3.0 放棄defineProperty, 使用Proxy的原因
Object.defineProperty缺陷
1.監(jiān)控到數(shù)組下標(biāo)的變化時，開銷很大。所以Vue.js放棄了下標(biāo)變化的檢測；
2.Object.defineProperty只能劫持對象的屬性，而Proxy是直接代理對象。3.Object.defineProperty需要遍歷對象的每個屬性，如果屬性值也是對象，則需要深度遍歷。而 Proxy 直接代理對象，不需要遍歷操作。
4.Object.defineProperty對新增屬性需要手動進(jìn)行Observe。vue2時需要使用 vm.$set 才能保證新增的屬性也是響應(yīng)式
5.Proxy支持13種攔截操作，這是defineProperty所不具有的
6.Proxy 作為新標(biāo)準(zhǔn)，長遠(yuǎn)來看，JS引擎會繼續(xù)優(yōu)化 Proxy，但 getter 和 setter 基本不會再有針對性優(yōu)化
1.6.Vue 2 中給 data 中的對象屬性添加一個新的屬性時會發(fā)生什么？如何解決？
視圖并未刷新。這是因為在Vue實(shí)例創(chuàng)建時，新屬性并未聲明，因此就沒有被Vue轉(zhuǎn)換為響應(yīng)式的屬性，自然就不會觸發(fā)視圖的更新，這時就需要使用Vue的全局 api $set()：
this.$set(this.obj, 'new_property', 'new_value')
1.7.Computed和Watch的區(qū)別及運(yùn)用場景
computed 計算屬性 : 依賴其它屬性值,并且 computed 的值有緩存,只有它依賴的 屬性值發(fā)生改變,下一次獲取 computed 的值時才會重新計算 computed 的值。
watch 偵聽器 :
