本篇文章給大家總結(jié)分享一些Vue面試題（附答案解析），帶你梳理基礎(chǔ)知識(shí)，增強(qiáng)Vue知識(shí)儲(chǔ)備，值得收藏，快來看看吧！

（學(xué)習(xí)視頻分享：vue視頻教程）

一、Vue.js基本問題

1.1.Vue 響應(yīng)式原理

核心實(shí)現(xiàn)類:
Observer : 它的作用是給對(duì)象的屬性添加 getter 和 setter，用于依賴收集和派發(fā)更新
Dep : 用于收集當(dāng)前響應(yīng)式對(duì)象的依賴關(guān)系,每個(gè)響應(yīng)式對(duì)象包括子對(duì)象都擁有一個(gè) Dep 實(shí)例（里面 subs 是 Watcher 實(shí)例數(shù)組）,當(dāng)數(shù)據(jù)有變更時(shí),會(huì)通過 dep.notify()通知各個(gè) watcher。
Watcher : 觀察者對(duì)象 , 實(shí)例分為渲染 watcher (render watcher),計(jì)算屬性 watcher (computed watcher),偵聽器 watcher（user watcher）三種
Watcher 和 Dep 的關(guān)系:
watcher 中實(shí)例化了 dep 并向 dep.subs 中添加了訂閱者,dep 通過 notify 遍歷了 dep.subs 通知每個(gè) watcher 更新。
依賴收集:
initState 時(shí),對(duì) computed 屬性初始化時(shí),觸發(fā) computed watcher 依賴收集
initState 時(shí),對(duì)偵聽屬性初始化時(shí),觸發(fā) user watcher 依賴收集
render()的過程,觸發(fā) render watcher 依賴收集
re-render 時(shí),vm.render()再次執(zhí)行,會(huì)移除所有 subs 中的 watcer 的訂閱,重新賦值。
派發(fā)更新:
組件中對(duì)響應(yīng)的數(shù)據(jù)進(jìn)行了修改,觸發(fā) setter 的邏輯
調(diào)用 dep.notify()
遍歷所有的 subs（Watcher 實(shí)例）,調(diào)用每一個(gè) watcher 的 update 方法。
原理:
當(dāng)創(chuàng)建 Vue 實(shí)例時(shí),vue 會(huì)遍歷 data 選項(xiàng)的屬性,利用 Object.defineProperty 為屬性添加 getter 和 setter 對(duì)數(shù)據(jù)的讀取進(jìn)行劫持（getter 用來依賴收集,setter 用來派發(fā)更新）,并且在內(nèi)部追蹤依賴,在屬性被訪問和修改時(shí)通知變化。
每個(gè)組件實(shí)例會(huì)有相應(yīng)的 watcher 實(shí)例,會(huì)在組件渲染的過程中記錄依賴的所有數(shù)據(jù)屬性（進(jìn)行依賴收集,還有 computed watcher,user watcher 實(shí)例）,之后依賴項(xiàng)被改動(dòng)時(shí),setter 方法會(huì)通知依賴與此 data 的 watcher 實(shí)例重新計(jì)算（派發(fā)更新）,從而使它關(guān)聯(lián)的組件重新渲染。
一句話總結(jié):
vue.js 采用數(shù)據(jù)劫持結(jié)合發(fā)布-訂閱模式,通過 Object.defineproperty 來劫持各個(gè)屬性的 setter,getter,在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者,觸發(fā)響應(yīng)的監(jiān)聽回調(diào)

1.2.Vue.js 的特點(diǎn)

易用： 簡單，易學(xué)，上手快
靈活： （漸進(jìn)式）不斷繁榮的生態(tài)系統(tǒng)，可以在一個(gè)庫和一套完整框架之間自如伸縮。
高效： 20kB min+gzip 運(yùn)行大??；超快虛擬 DOM；最省心的優(yōu)化
雙向綁定：開發(fā)效率高
基于組件的代碼共享
Web項(xiàng)目工程化，增加可讀性、可維護(hù)性

1.3. Vue.js 雙向綁定的原理

Vue.js 2.0 采用數(shù)據(jù)劫持（Proxy 模式）結(jié)合發(fā)布者-訂閱者模式（PubSub 模式）的方式，通過 Object.defineProperty()來劫持各個(gè)屬性的 setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
每個(gè)組件實(shí)例都有相應(yīng)的watcher程序?qū)嵗?，它?huì)在組件渲染的過程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的setter被調(diào)用時(shí)，會(huì)通知watcher重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

Vue.js 3.0, 放棄了Object.defineProperty ，使用更快的ES6原生 Proxy (訪問對(duì)象攔截器, 也稱代理器)

步驟：

1.需要observe的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性，都加上setter和getter這樣的話，給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化
2.compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)，收到通知，更新視圖
3.Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是: ①在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己 ②自身必須有一個(gè)update()方法 ③待屬性變動(dòng)dep.notice()通知時(shí)，能調(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)控某個(gè)屬性值的變化？

比如現(xiàn)在需要監(jiān)控data中， obj.a 的變化。Vue中監(jiān)控對(duì)象屬性的變化你可以這樣：

watch: {       obj: {       	handler (newValue, oldValue) {         console.log('obj changed')       },       deep: true     }

deep屬性表示深層遍歷，但是這么寫會(huì)監(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           } }

利用計(jì)算屬性的特性來實(shí)現(xiàn)，當(dāng)依賴改變時(shí)，便會(huì)重新計(jì)算一個(gè)新值。

1.5.Vue.js 3.0 放棄defineProperty, 使用Proxy的原因

Object.defineProperty缺陷

1.監(jiān)控到數(shù)組下標(biāo)的變化時(shí)，開銷很大。所以Vue.js放棄了下標(biāo)變化的檢測；
2.Object.defineProperty只能劫持對(duì)象的屬性，而Proxy是直接代理對(duì)象。3.Object.defineProperty需要遍歷對(duì)象的每個(gè)屬性，如果屬性值也是對(duì)象，則需要深度遍歷。而 Proxy 直接代理對(duì)象，不需要遍歷操作。
4.Object.defineProperty對(duì)新增屬性需要手動(dòng)進(jìn)行Observe。vue2時(shí)需要使用 vm.$set 才能保證新增的屬性也是響應(yīng)式
5.Proxy支持13種攔截操作，這是defineProperty所不具有的
6.Proxy 作為新標(biāo)準(zhǔn)，長遠(yuǎn)來看，JS引擎會(huì)繼續(xù)優(yōu)化 Proxy，但 getter 和 setter 基本不會(huì)再有針對(duì)性優(yōu)化

1.6.Vue 2 中給 data 中的對(duì)象屬性添加一個(gè)新的屬性時(shí)會(huì)發(fā)生什么？如何解決？

視圖并未刷新。這是因?yàn)樵赩ue實(shí)例創(chuàng)建時(shí)，新屬性并未聲明，因此就沒有被Vue轉(zhuǎn)換為響應(yīng)式的屬性，自然就不會(huì)觸發(fā)視圖的更新，這時(shí)就需要使用Vue的全局 api $set()：

this.$set(this.obj, 'new_property', 'new_value')

1.7.Computed和Watch的區(qū)別及運(yùn)用場景

computed 計(jì)算屬性 : 依賴其它屬性值,并且 computed 的值有緩存,只有它依賴的 屬性值發(fā)生改變,下一次獲取 computed 的值時(shí)才會(huì)重新計(jì)算 computed 的值。
watch 偵聽器 :