01 vue的發布者和訂閱者是什么(Vue 面試中常問知識點整理)

Vue雙向數據綁定原理分析 -- Dep(發布者，訂閱收集器)

Dep是Observer與Watcher之間的紐帶，也 可以認為Dep是服務于Observer的訂閱系統 。Watcher訂閱某個Observer的Dep，當Observer觀察的數據發生變化時，通過Dep通知各個已經訂閱的Watcher。

Dep提供了幾個接口：

addSub 和 depend這兩個方法是用來關聯Watcher實例和Dep實例的，這兩種實例的關系是多對對的關系：

•  一個Dep實例可以關聯多個Watcher實例

•  一個Watcher實例可以關聯多個Dep實例

除了這些接口以外，Dep定義了兩個實例屬性和一個靜態屬性：

以上這些都很容易理解，難的在于dep.js里面還定義了一個targetStack的東西：

筆者本著求知的精神，千辛萬苦終于找到了大神的講解：

到此為止，我們就明白了Dep類的實現原理，下一篇我們將了解Watcher類的實現。

vue面試題

Model 層: 對應數據層的域模型，它主要做域模型的同步 。在層間關系⾥，它主要⽤于抽象出 ViewModel 中視圖的 Model。

View 層: 作為視圖模板存在 ，在 MVVM ⾥，整個 View 是⼀個動態模板。 除了定義結構、布局外，它展示的是 ViewModel 層的數據和狀態 。View 層不負責處理狀態，View 層做的是 數據綁定的聲明、 指令的聲明、 事件綁定的聲 明。

ViewModel 層: 把 View 需要的層數據暴露，并對 View 層的 數據綁定聲明、 指令聲明、 事件綁定聲明 負責，也就是處 理 View 層的具體業務邏輯。 ViewModel 底層會做好綁定屬性的監聽。當 ViewModel 中數據變化，View 層會得到更新；⽽當 View 中聲明了數據的雙向綁定（通常是表單元素），框架也會監聽 View 層（表單）值的變化。⼀旦值變 化，View 層綁定的 ViewModel 中的數據也會得到⾃動更新。

優點:

Model變化和修改，⼀個ViewModel可以綁定不同的"View"上，當View變化的時候Model不可以不變，當Model變化 的時候View也可以不變。你可以把⼀些視圖邏輯放在⼀個ViewModel⾥⾯，讓很多view重⽤這段視圖邏輯

缺點:

Vue 實例有⼀個完整的⽣命周期，也就是從開始創建、初始化數據、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等⼀系列過程

官⽅實例的異步請求是在mounted⽣命周期中調⽤的，⽽實際上也可以在created⽣命周期中調⽤。

買粉絲s://juejin.im/post/5d267dcdf265da1b957081a3

買粉絲puted用于計算屬性，只有它依賴的值改變才會觸發，且這個值有緩存

watch用于監聽一個屬性的變化，屬性變化就會觸發

買粉絲puted:

⼩結:

簡單版：利⽤ Object.defineProperty 劫持對象的訪問器,在屬性值發⽣變化時我們可以獲取變化,然后根據變化進⾏后續響應,在 vue3.0中通過Proxy代理對象進⾏類似的操作。

補充

vue的雙向綁定是通過數據劫持和發布者-訂閱者模式實現的，數據劫持又是通過

Object.defineProperty()實現的

Proxy的優勢如下:

Proxy可以直接監聽對象⽽⾮屬性

Proxy可以直接監聽數組的變化

Proxy有多達13種攔截⽅法,不限于apply、ownKeys、deleteProperty、has等等是 Object.defineProperty 不具備的

Proxy返回的是⼀個新對象,我們可以只操作新的對象達到⽬的,⽽

Object.defineProperty 只能遍歷對象屬性直接修 改Proxy作為新標準將受到瀏覽器⼚商重點持續的性能優化，也就是傳說中的新標準的性能紅利

Object.defineProperty的優勢如下: 兼容性好,⽀持IE9

v-if 用于條件渲染

v-show 用于條件渲染，兩者的區別請參考下一個問題

v-for 用于列表渲染

v-on 監聽事件

v-bind 動態綁定

v-買粉絲 渲染買粉絲元素

v-model 數據雙向綁定

v-if 是惰性的，只有條件為真時才會切換，為假時什么也不做。確保切換過程中的事件監聽器和子組件適當的被銷毀和重建，適用于運行條件很少改變的場景。v-show 不管條件是否為真，總是會被渲染，適用于頻繁切換的場景

v-for優先級高于v-if，放于同級可能會重復渲染兩次v-if，建議把v-for放于v-if所在的外層元素

原理:eventloop事件循環

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

key 主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。不指定key時，Vue 會使用一種最大限度減少動態元素并且盡可能的嘗試

就地修改/復用相同類型元素的算法。而使用 key 時，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。

有相同父元素的子元素必須有獨特的 key。重復的 key 會造成渲染錯誤。

1.beforeCreate

初始化界面前

2.created

初始化界面后，拿到data，props，methods、買粉絲puted和watch

3.beforeMount

渲染dom前

4.mounted

渲染dom后，拿到$el

5.beforeUpdate

更新前

6.updated

更新后，拿到更新后的dom

7.beforeDestroy

卸載組件前

8.destroyed

卸載組件后

9.activated

被 keep-alive 緩存的組件激活時調用

10.deactivated

被 keep-alive 緩存的組件停用時調用

虛擬dom是對真實dom的一種映射，新舊Vnode比較同層級的節點，然后根據兩者的差異只更新有差異的部分，生成新的視圖，而不是對樹進行逐層搜素遍歷，因此時間復雜度是O(n)。虛擬dom可以減少頁面的回流和重繪，提升性能

Vue 面試中常問知識點整理

生命周期：Vue實例從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期，各個階段有相對應的事件鉤子。

beforeCreate（創建前），在數據觀測和初始化事件還未開始

created（創建后），完成數據觀測，屬性和方法的運算，初始化事件， $el 屬性還沒有顯示出來

beforeMount（載入前），在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data里面的數據和模板生成買粉絲。注意此時還沒有掛載買粉絲到頁面上。

mounted（載入后），在 el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用。實例已完成以下的配置：用上面編譯好的買粉絲內容替換 el 屬性指向的DOM對象。完成模板中的買粉絲渲染到買粉絲頁面中。此過程中進行ajax交互。

beforeUpdate（更新前），在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。

updated（更新后），在由于數據更改導致的虛擬DOM重新渲染和打補丁之后調用。調用時，組件DOM已經更新，所以可以執行依賴于DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。

beforeDestroy（銷毀前），在實例銷毀之前調用。實例仍然完全可用。

destroyed（銷毀后），在實例銷毀之后調用。調用后，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。

注意：

created 階段的ajax請求與 mounted 請求的區別：前者頁面視圖未出現，如果請求信息過多，頁面會長時間處于白屏狀態。

mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 。

初始化組件時，僅執行了 beforeCreate/Created/beforeMount/mounted 四個鉤子函數

當改變 data 中定義的變量（響應式變量）時，會執行 beforeUpdate/updated 鉤子函數

當切換組件（當前組件未緩存）時，會執行 beforeDestory/destroyed 鉤子函數

初始化和銷毀時的生命鉤子函數均只會執行一次， beforeUpdate/updated 可多次執行

僅當子組件完成掛載后，父組件才會掛載

當子組件完成掛載后，父組件會主動執行一次beforeUpdate/updated鉤子函數（僅首次）

父子組件在data變化中是分別監控的，但是在更新props中的數據是關聯的

銷毀父組件時，先將子組件銷毀后才會銷毀父組件

組件的初始化（mounted之前）分開進行，掛

很赞哦!（817）