vue2.0源碼分析之理解響應式架構

chenatu 發布于2019-08-20 11:57 / 1979人閱讀

摘要：分享前啰嗦我之前介紹過如何實現和。我們采用用最精簡的代碼，還原響應式架構實現以前寫的那篇源碼分析之如何實現和可以作為本次分享的參考。到現在為止，我們再看那張圖是不是就清楚很多了總結我非常喜歡，以上代碼為了好展示，都采用最簡單的方式呈現。

分享前啰嗦

我之前介紹過vue1.0如何實現observer和watcher。本想繼續寫下去，可是vue2.0橫空出世..所以
直接看vue2.0吧。這篇文章在公司分享過，終于寫出來了。我們采用用最精簡的代碼，還原vue2.0響應式架構實現
以前寫的那篇 vue 源碼分析之如何實現 observer 和 watcher可以作為本次分享的參考。
不過不看也沒關系，但是最好了解下Object.defineProperty

本文分享什么

理解vue2.0的響應式架構，就是下面這張圖

順帶介紹他比react快的其中一個原因

本分實現什么

const demo = new Vue({
  data: {
    text: "before",
  },
  //對應的template 為 {{text}}
  render(h){
    return h("div", {}, [
      h("span", {}, [this.__toString__(this.text)])
    ])
  }
})
 setTimeout(function(){
   demo.text = "after"
 }, 3000)

對應的虛擬dom會從

before

變為 after

好，開始吧?。?！

第一步，講data 下面所有屬性變為observable

來來來先看代碼吧

    class Vue {
      constructor(options) {
        this.$options = options
        this._data = options.data
        observer(options.data, this._update)
        this._update()
      }
      _update(){
        this.$options.render()
      }
    }


    function observer(value, cb){
      Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
    }

    function defineReactive(obj, key, val, cb) {
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: ()=>{},
        set:newVal=> {
          cb()
        }
      })
    }

    var demo = new Vue({
      el: "#demo",
      data: {
        text: 123,
      },
      render(){
        console.log("我要render了")
      }
    })

     setTimeout(function(){
       demo._data.text = 444
     }, 3000)

為了好演示我們只考慮最簡單的情況，如果看了vue 源碼分析之如何實現 observer 和 watcher可能就會很好理解，不過沒關系，我們三言兩語再說說，這段代碼要實現的功能就是將

    var demo = new Vue({
      el: "#demo",
      data: {
        text: 123,
      },
      render(){
        console.log("我要render了")
      }
    })

中data 里面所有的屬性置于 observer，然后data里面的屬性，比如 text 以改變，就引起_update()函數調用進而重新渲染，是怎樣做到的呢，我們知道其實就是賦值的時候就要改變對吧，當我給data下面的text 賦值的時候 set 函數就會觸發，這個時候調用 _update 就ok了，但是

     setTimeout(function(){
       demo._data.text = 444
     }, 3000)

demo._data.text沒有demo.text用著爽，沒關系，我們加一個代理

      _proxy(key) {
        const self = this
        Object.defineProperty(self, key, {
          configurable: true,
          enumerable: true,
          get: function proxyGetter () {
            return self._data[key]
          },
          set: function proxySetter (val) {
            self._data[key] = val
          }
        })
      }

然后在Vue的constructor加上下面這句

    Object.keys(options.data).forEach(key => this._proxy(key))

第一步先說到這里，我們會發現一個問題，data中任何一個屬性的值改變，都會引起
_update的觸發進而重新渲染，屬性這顯然不夠精準啊

第二步，詳細闡述第一步為什么不夠精準

比如考慮下面代碼

    new Vue({
      template: `
        
          
            name: {{name}}
          
          
            age: {{age}}
          
        `,
      data: {
        name: "js",
        age: 24,
        height: 180
      }
    })

    setTimeout(function(){
      demo.height = 181
    }, 3000)

template里面只用到了data上的兩個屬性name和age，但是當我改變height的時候，用第一步的代碼，會不會觸發重新渲染？會！，但其實不需要觸發重新渲染，這就是問題所在！！

第三步，上述問題怎么解決 簡單說說虛擬 DOM

首先，template最后都是編譯成render函數的(具體怎么做，就不展開說了，以后我會說的)，然后render 函數執行完就會得到一個虛擬DOM，為了好理解我們寫寫最簡單的虛擬DOM

    function VNode(tag, data, children, text) {
      return {
        tag: tag,
        data: data,
        children: children,
        text: text
      }
    }

    class Vue {
      constructor(options) {
        this.$options = options
        const vdom = this._update()
        console.log(vdom)
      }
      _update() {
        return this._render.call(this)
      }
      _render() {
        const vnode = this.$options.render.call(this)
        return vnode
      }
      __h__(tag, attr, children) {
        return VNode(tag, attr, children.map((child)=>{
          if(typeof child === "string"){
            return VNode(undefined, undefined, undefined, child)
          }else{
            return child
          }
        }))
      }
      __toString__(val) {
        return val == null ? "" : typeof val === "object" ? JSON.stringify(val, null, 2) : String(val);
      }
    }


    var demo = new Vue({
      el: "#demo",
      data: {
        text: "before",
      },
      render(){
        return this.__h__("div", {}, [
          this.__h__("span", {}, [this.__toString__(this.text)])
        ])
      }
    })

我們運行一下，他會輸出

     {
       tag: "div",
       data: {},
       children:[
         {
           tag: "span",
           data: {},
           children: [
             {
               children: undefined,
               data: undefined,
               tag: undefined,
               text: "" // 正常情況為 字符串 before，因為我們為了演示就不寫代理的代碼，所以這里為空
             }
           ]
         }
       ]
     }

這就是虛擬最簡單虛擬DOM,tag是html 標簽名，data 是包含諸如 class 和 style 這些標簽上的屬性，childen就是子節點，關于虛擬DOM就不展開說了。
回到開始的問題，也就是說，我得知道，render 函數里面依賴了vue實例里面哪些變量（只考慮render 就可以，因為template 也會是幫你編譯成render）。敘述有點拗口，還是看代碼吧

    var demo = new Vue({
      el: "#demo",
      data: {
        text: "before",
        name: "123",
        age: 23
      },
      render(){
        return this.__h__("div", {}, [
          this.__h__("span", {}, [this.__toString__(this.text)])
        ])
      }
    })

就像這段代碼，render 函數里其實只依賴text，并沒有依賴 name和 age,所以，我們只要text改變的時候
我們自動觸發 render 函數讓它生成一個虛擬DOM就ok了（剩下的就是這個虛擬DOM和上個虛擬DOM做比對，然后操作真實DOM，只能以后再說了），那么我們正式考慮一下怎么做

第三步，"touch" 拿到依賴

回到最上面那張圖，我們知道data上的屬性設置defineReactive后，修改data 上的值會觸發 set。
那么我們取data上值是會觸發 get了。
對，我們可以在上面做做手腳，我們先執行一下render，我們看看data上哪些屬性觸發了get，我們豈不是就可以知道 render 會依賴data 上哪些變量了。
然后我么把這些變量做些手腳，每次這些變量變的時候，我們就觸發render。
上面這些步驟簡單用四個子概括就是計算依賴。
（其實不僅是render，任何一個變量的改別，是因為別的變量改變引起，都可以用上述方法，也就是computed 和 watch 的原理，也是mobx的核心）

第一步，

我們寫一個依賴收集的類，每一個data 上的對象都有可能被render函數依賴，所以每個屬性在defineReactive
時候就初始化它，簡單來說就是這個樣子的

    class Dep {
      constructor() {
        this.subs = []
      }
      add(cb) {
        this.subs.push(cb)
      }
      notify() {
        console.log(this.subs);
        this.subs.forEach((cb) => cb())
      }
    }
    function defineReactive(obj, key, val, cb) {
      const dep = new Dep()
      Object.defineProperty(obj, key, {
        // 省略
      })
    }

然后，當執行render 函數去"touch"依賴的時候，依賴到的變量get就會被執行，然后我們就可以把這個 render 函數加到 subs 里面去了。
當我們，set 的時候我們就執行 notify 將所有的subs數組里的函數執行，其中就包含render 的執行。
至此就完成了整個圖，好我們將所有的代碼展示出來

    function VNode(tag, data, children, text) {
      return {
        tag: tag,
        data: data,
        children: children,
        text: text
      }
    }

    class Vue {
      constructor(options) {
        this.$options = options
        this._data = options.data
        Object.keys(options.data).forEach(key => this._proxy(key))
        observer(options.data)
        const vdom = watch(this, this._render.bind(this), this._update.bind(this))
        console.log(vdom)
      }
      _proxy(key) {
        const self = this
        Object.defineProperty(self, key, {
          configurable: true,
          enumerable: true,
          get: function proxyGetter () {
            return self._data[key]
          },
          set: function proxySetter (val) {
            self._data.text = val
          }
        })
      }
      _update() {
        console.log("我需要更新");
        const vdom = this._render.call(this)
        console.log(vdom);
      }
      _render() {
        return this.$options.render.call(this)
      }
      __h__(tag, attr, children) {
        return VNode(tag, attr, children.map((child)=>{
          if(typeof child === "string"){
            return VNode(undefined, undefined, undefined, child)
          }else{
            return child
          }
        }))
      }
      __toString__(val) {
        return val == null ? "" : typeof val === "object" ? JSON.stringify(val, null, 2) : String(val);
      }
    }

    function observer(value, cb){
      Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
    }

    function defineReactive(obj, key, val, cb) {
      const dep = new Dep()
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: ()=>{
          if(Dep.target){
            dep.add(Dep.target)
          }
          return val
        },
        set: newVal => {
          if(newVal === val)
            return
          val = newVal
          dep.notify()
        }
      })
    }
    function watch(vm, exp, cb){
      Dep.target = cb
      return exp()
    }

    class Dep {
      constructor() {
        this.subs = []
      }
      add(cb) {
        this.subs.push(cb)
      }
      notify() {
        this.subs.forEach((cb) => cb())
      }
    }
    Dep.target = null


    var demo = new Vue({
      el: "#demo",
      data: {
        text: "before",
      },
      render(){
        return this.__h__("div", {}, [
          this.__h__("span", {}, [this.__toString__(this.text)])
        ])
      }
    })


     setTimeout(function(){
       demo.text = "after"
     }, 3000)

我們看一下運行結果

好我們解釋一下 Dep.target 因為我們得區分是，普通的get，還是在查找依賴的時候的get，
所有我們在查找依賴時候，我們將

    function watch(vm, exp, cb){
      Dep.target = cb
      return exp()
    }

Dep.target 賦值，相當于 flag 一下，然后 get 的時候

       get: () => {
          if (Dep.target) {
            dep.add(Dep.target)
          }
          return val
        },

判斷一下，就好了。
到現在為止，我們再看那張圖是不是就清楚很多了？

總結

我非常喜歡，vue2.0 以上代碼為了好展示，都采用最簡單的方式呈現。
不過整個代碼執行過程，甚至是命名方式都和vue2.0一樣
對比react，vue2.0 自動幫你監測依賴，自動幫你重新渲染，而
react 要實現性能最大化，要做大量工作，比如我以前分享的
react如何性能達到最大化(前傳)，暨react為啥非得使用immutable.js
react 實現pure render的時候，bind(this)隱患。
而 vue2.0 天然幫你做到了最優,而且對于像萬年不變的如標簽上靜態的class屬性，
vue2.0 在重新渲染后做diff 的時候是不比較的，vue2.0比達到性能最大化的react 還要快的一個原因
然后源碼在此，喜歡的記得給個 star 哦?
后續，我會簡單聊聊，vue2.0的diff。
如果有疑問，可以在評論區留言哈

GPU云服務器云服務器 asp響應式源碼 vue2.0 cdn 響應式響應式布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80725.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

lily_wang 2019-06-27 16:28 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

chengjianhua 2019-08-29 12:35 評論0 收藏0

發表評論

登陸后可評論

0條評論

chenatu

男|高級講師

我要關注我要私信

TA的文章

HostWebis：便宜服務器/可選美國和法國機房/100Mbps不限流量/$34刀/月起，10Gb

閱讀 3300·2021-09-30 09:54
push主機是什么-什么是push技術？

閱讀 3782·2021-09-22 15:01
開源早讀課周刊（第5期）：Facebook的開源欣欣向榮

閱讀 3105·2021-08-27 16:19
CSS浮動float

閱讀 2572·2019-08-29 18:39
移動端overflow失效問題

閱讀 2146·2019-08-29 14:09
Docker學習（一）docker的相關概念

閱讀 623·2019-08-26 10:23
用 canvas 的 getImageData 做點有趣的事

閱讀 1337·2019-08-23 12:01
一個 VUE 組件：實現子元素 scroll 父元素容器不跟隨滾動（兼容PC、移動端）

閱讀 1862·2019-08-22 13:57

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

vue2.0源碼分析之理解響應式架構

相關文章

**關于Vue2一些值得推薦的文章 -- 五、六月份**

**關于Vue2一些值得推薦的文章 -- 五、六月份**

2017年2月份前端資源分享

2017年2月份前端資源分享

發表評論

0條評論

chenatu

男|高級講師

TA的文章

HostWebis：便宜服務器/可選美國和法國機房/100Mbps不限流量/$34刀/月起，10Gb

push主機是什么-什么是push技術？

開源早讀課周刊（第5期）：Facebook的開源欣欣向榮

CSS浮動float

移動端overflow失效問題

Docker學習（一）docker的相關概念

用 canvas 的 getImageData 做點有趣的事

一個 VUE 組件：實現子元素 scroll 父元素容器不跟隨滾動（兼容PC、移動端）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

vue2.0源碼分析之理解響應式架構

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！