# 「每日一題」有人上次在dy面試，面試官問我：vue數據綁定的實現原理。你說我該如何回答？

時間 2021-01-04

標籤前端 vue 面試算法數組瀏覽器框架學習 spa 設計欄目快樂工作简体版

原文原文鏈接

關注「鬆寶寫代碼」，精選好文，每日一題前端

時間永遠是本身的vue

每分每秒也都是爲本身的未來鋪墊和增值面試

做者：saucxs ｜ songEagle
來源：原創算法

1、前言

文章首發wx的「鬆寶寫代碼」數組

2020.12.23 日剛立的 flag，每日一題，題目類型不限制，能夠是：算法題，面試題，闡述題等等。瀏覽器

本文是「每日一題」第 5 題：「每日一題」到底該如何回答：vue數據綁定的實現原理？框架

往期「每日一題」：學習

第 4 道「每日一題」與面試官手撕代碼：如何科學高效的尋找重複元素？
第 3 道「「每日一題」面試官問你對 Promise 的理解？多是須要你能手動實現各個特性」
第 2 道[「[每日一題]ES6 中爲何要使用 Symbol？」](https://mp.weixin.qq.com/s/om...
第 1 道「一道面試題是如何引起深層次的靈魂拷問？」

2、vue數據綁定的實現原理？

這個題目自己不是特別難，只能說是做爲社招的基礎面試題，可是若是想回答好這道題也不是很容易。spa

不信接着往下看設計

一、歸納回答

vue.js是一個很是優秀的前端開發框架，使用vue的版本是v2.x

vue幾個核心的地方：vue實例化，虛擬DOM，模板編譯過程，數據綁定。

咱們開始回到正題，vue.js的做者尤雨溪最初就是嘗試實現一個相似angular1的東西，發現裏面對於數據處理很是不優雅，因而創造性的嘗試利用ES5中的Object.defineProperty來實現數據綁定，因而就有了最初的vue。

vue的數據綁定的實現原理離不開vue中響應式的數據處理方式。

咱們能夠回想一下官網的圖：

vue的響應式基本原理：

一、vue會遍歷此data中對象全部的屬性，
二、並使用Object.defineProperty把這些屬性所有轉爲getter/setter，
三、而每一個組件實例都有watcher對象，
四、它會在組件渲染的過程當中把屬性記錄爲依賴，
五、以後當依賴項的 setter被調用時，會通知watcher從新計算，從而導致它關聯的組件得以更新。

二、亮點回答

歸納回答咱們只回答了使用ES5的方法 Object.defineProperty 實現數據的監聽的，那麼具體是如何實現仍是沒有講的很清楚。

這時候咱們須要問本身，如何找亮點？

vue的響應式原理設計三個重要對象：Observer，Watcher，Dep。

Observer對象：vue中的數據對象在初始化過程當中轉換爲Observer對象。
Watcher對象：將模板和Observer對象結合在一塊兒生成Watcher實例，Watcher是訂閱者中的訂閱者。
Dep對象：Watcher對象和Observer對象之間紐帶，每個Observer都有一個Dep實例，用來存儲訂閱者Watcher。

當屬性變化會執行主題對象Observer的dep.notify方法，這個方法會遍歷訂閱者Watcher列表向其發送消息， Watcher會執行run方法去更新視圖。

依賴關係圖以下，更能方面咱們的理解

接着咱們須要補充的是：模板編譯過程當中的指令和數據綁定都會生成Watcher實例，實例中的watch屬性也會生成Watcher實例。

說的這些有沒有以爲有點亂，那咱們總結一下如何亮點回答

一、在生命週期的initState方法中將data，prop，method，computed，watch中的數據劫持，經過observe方法與Object.defineProperty方法將相關對象轉爲換Observer對象。
二、而後在initRender方法中解析模板，經過Watcher對象，Dep對象與觀察者模式將模板中的指令與對象的數據創建依賴關係，使用全局對象Dep.target實現依賴收集。
三、當數據變化時，setter被調用，觸發Object.defineProperty方法中的dep.notify方法，遍歷該數據依賴列表，執行器update方法通知Watcher進行視圖更新。
vue是沒法檢測到對象屬性的添加和刪除，可是可使用全局Vue.set方法（或vm.$set實例方法）。
vue沒法檢測利用索引設置數組，可是可使用全局Vue.set方法（或vm.$set實例方法）。
沒法檢測直接修改數組長度，可是可使用splice

而後寫一個使用Object.defineProperty實現監聽變量

var obj = {};
var a;
Object.defineProperty(obj, 'a', {
  get: function() {
    console.log('get val');　
    return a;
  },
  set: function(newVal) {
    console.log('set val:' + newVal);
    a = newVal;
  }
});
obj.a;     // get val 
obj.a = 'saucxs'    //set val

若是上面代碼格式出現問題，能夠查看下面代碼圖片

三、進階回答

由於如今vue已經到3了，再也不是停留在2的時候，這個時候，能夠把3的原理簡單說一下。

這個時候不該該是ES6的proxy特性上場了，proxy是ES6的新增的功能，能夠用來定義對象中的操做。

let p = new Proxy(target, handler);
// `target` 表明須要添加代理的對象
// `handler` 用來自定義對象中的操做

若是上面代碼格式出現問題，能夠查看下面代碼圖片

能夠很方便的使用 Proxy 來實現一個數據綁定和監聽.

let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver);
    },
    set(target, property, value, receiver) {
      setBind(value);
      return Reflect.set(target, property, value);
    }
  };
  return new Proxy(obj, handler);
};

let obj = { saucxs: 1 }
let value
let p = onWatch(obj, (v) => {
  value = v
}, (target, property) => {
  console.log(`Get '${property}' = ${target[property]}`);
})
p.saucxs = songEagle // bind `value` to `songEagle`
p.saucxs // -> Get 'saucxs' = songEagle

若是上面代碼格式出現問題，能夠查看下面代碼圖片