03 vue發布訂閱模式(理解VUE2雙向數據綁定原理和實現)

四個鉤子函數

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

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

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

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

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

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

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

組件的初始化（mounted之前）分開進行，掛載是從上到下依次進行

當沒有數據關聯時，兄弟組件之間的更新和銷毀是互不關聯的

mixin中的生命周期與引入該組件的生命周期是僅僅關聯的，且mixin的生命周期優先執行

1、什么是vue生命周期？

答： Vue 實例從創建到銷毀的過程，就是生命周期。從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。

2、vue生命周期的作用是什么？

答：它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。

3、vue生命周期總共有幾個階段？

答：它可以總共分為8個階段：創建前/后、載入前/后、更新前/后、銷毀前/銷毀后。

5、DOM 渲染在哪個周期中就已經完成？

答：DOM 渲染在 mounted 中就已經完成了。

vue實現數據雙向綁定主要是：采用數據劫持結合發布者-訂閱者模式的方式，通過 Object.defineProperty() 來劫持各個屬性的 setter，getter ，在數據變動時發布消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty() 將它們轉為 getter/setter 。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數據雙向綁定 將MVVM作為數據綁定的入口，整合 Observer ，Compile和 Watcher 三者，通過 Observer 來監聽自己的 model 的數據變化，通過 Compile 來解析編譯模板指令（vue中是用來解析 { { }}），最終利用 watcher 搭起observer和 Compile 之間的通信橋梁，達到數據變化 —>視圖更新；視圖交互變化（ input ）—>數據 model 變更雙向綁定效果。

js實現簡單的雙向綁定：

1、父組件與子組件傳值

父組件傳給子組件：子組件通過 props 方法接受數據；

子組件傳給父組件： $emit 方法傳遞參數

2、非父子組件間的數據傳遞，兄弟組件傳值 eventBus ，就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。

hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用 window.location.hash 讀取。特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。

history模式：history采用HTML5的新特性；且提供了兩個新方法： pushState()， replaceState()可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。

需求一：

在一個列表頁中，第一次進入的時候，請求獲取數據。

點擊某個列表項，跳到詳情頁，再從詳情頁后退回到列表頁時，不刷新。

也就是說從其他頁面進到列表頁，需要刷新獲取數據，從詳情頁返回到列表頁時不要刷新。

解決方案

在 App.vue設置：

假設列表頁為 list.vue ，詳情頁為 detail.vue ，這兩個都是子組件。

我們在 keep-alive 添加列表頁的名字，緩存列表頁。

然后在列表頁的 created 函數里添加ajax請求，這樣只有第一次進入到列表頁的時候才會請求數據，當從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會刷新。

這樣就可以解決問題了。

需求二：

在需求一的基礎上，再加一個要求：可以在詳情頁中刪除對應的列表項，這時返回到列表頁時需要刷新重新獲取數據。

我們可以在路由配置文件上對 detail.vue 增加一個 meta 屬性。

這個 meta 屬性，可以在詳情頁中通過 this.$route.meta.isRefresh 來讀取和設置。

設置完這個屬性，還要在 App.vue 文件里設置 watch 一下 $route 屬性。

這樣就不需要在列表頁的 created 函數里用 ajax 來請求數據了，統一放在 App.vue 里來處理。

觸發請求數據有兩個條件：

從其他頁面（除了詳情頁）進來列表時，需要請求數據。

從詳情頁返回到列表頁時，如果詳情頁 meta 屬性中的 isRefresh 為 true ，也需求重新請求數據。

當我們在詳情頁中刪除了對應的列表項時，就可以將詳情頁 meta 屬性中的 isRefresh 設為 true 。這時再返回到列表頁，頁面會重新刷新。

1、css只在當前組件起作用

答：在 style 標簽中寫入 s買粉絲ped 即可 例如： <style s買粉絲ped></style>

2、v-if 和 v-show 區別

答： v-if 按照條件是否渲染， v-show 是 display 的 block 或 none ；

3、 $route 和 $router 的區別

答： $route 是“路由信息對象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息參數。而 $router 是“路由實例”對象包括了路由的跳轉方法，鉤子函數等。

聊一聊 Vue3 中響應式原理

Vue.js 3.0 "One Piece" 正式發布已經有一段時間了，真可謂是千呼萬喚始出來啊！

相比于 Vue2.x ， Vue3.0 在新的版本中提供了更好的性能、更小的捆綁包體積、更好的 TypeScript 集成、用于處理大規模用例的新 API 。

在發布之前，尤大大就已經聲明了響應式方面將采用 Proxy 對于之前的 Object.defineProperty 進行改寫。其主要目的就是彌補 Object.defineProperty 自身的一些缺陷，例如無法檢測到對象屬性的新增或者刪除，不能監聽數組的變化等。

而 Vue3 采用了新的 Proxy 實現數據讀取和設置攔截，不僅彌補了之前 Vue2 中 Object.defineProperty 的缺陷，同時也帶來了性能上的提升。

今天，我們就來盤一盤它，看看 Vue3 中響應式是如何實現的。

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object. MDN

Proxy - 代理，顧名思義，就是在要訪問的對象之前增加一個中間層，這樣就不直接訪問對象，而是通過中間層做一個中轉，通過操作代理對象，來實現修改目標對象。

Vue3 中響應式核心方法就是 reactive 和 effect ， 其中 reactive 方法是負責將數據變成響應式， effect 方法的作用是根據數據變化去更新視圖或調用函數，與 react 中的 useEffect 有點類似~

其大概用法如下：

默認會執行一次，打印 Hello , 之后更改了 data.name 的值后，會在觸發執行一次，打印 World 。

我們先看看 reactive 方法的實現~

reactive.js

首先應該明確，我們應該導出一個 reactive 方法，該方法有一個參數 target ，目的就是將 target 變成響應式對象，因此返回值就是一個響應式對象。

reactive 方法基本結構就是如此，給定一個對象，返回一個響應式對象。

其中 isObject 方法用于判斷是否是對象，不是對象不需要代理，直接返回即可。

reactive 方法的重點是 Proxy 的第二個參數 handler ，它承載監控對象變化，依賴收集，視圖更新等各項重大責任，我們重點來研究這個對象。

handler.js

在 Vue3 中 Proxy 的 handler 主要設置了 get ， set ， deleteProperty ， has ， ownKeys 這些屬性，即攔截了對象的讀取，設置，刪除， in 以及 Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法。

這里我們偷個懶，暫時就考慮 set 和 get 操作。

handler.get()

get 獲取屬性比較簡單，我們先來看看這個，這里我們用一個方法創建 getHanlder 。

這里推薦使用了 Reflect.get 而并非 target[key] 。

可以發現， Vue3 是在取值的時候才去遞歸遍歷屬性的，而非 Vue2 中一開始就遞歸 data 給每個屬性添加 Watcher ，這也是 Vue3 性能提升之一。

handler.set()

同理 set 操作，我們也是用一個方法創建 setHandler 。

Reflect.set

很赞哦!（92118）