Vue.js響應式原理

caikeal 發布于2019-08-21 12:04 / 862人閱讀

摘要：關于是一款框架，上手快速簡單易用，通過響應式在修改數據的時候更新視圖。的響應式原理依賴于，尤大大在文檔中就已經提到過，這也是不支持以及更低版本瀏覽器的原因。代理我們可以在的構造函數中為執行一個代理。

寫在前面

因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。
文章的原地址：https://github.com/answershut...。
在學習過程中，為Vue加上了中文的注釋https://github.com/answershut...，希望可以對其他想學習Vue源碼的小伙伴有所幫助。
可能會有理解存在偏差的地方，歡迎提issue指出，共同學習，共同進步。

關于Vue.js

Vue.js是一款MVVM框架，上手快速簡單易用，通過響應式在修改數據的時候更新視圖。Vue.js的響應式原理依賴于Object.defineProperty，尤大大在Vue.js文檔中就已經提到過，這也是Vue.js不支持E8 以及更低版本瀏覽器的原因。Vue通過設定對象屬性的 setter/getter 方法來監聽數據的變化，通過getter進行依賴收集，而每個setter方法就是一個觀察者，在數據變更的時候通知訂閱者更新視圖。

將數據data變成可觀察（observable）的

那么Vue是如何將所有data下面的所有屬性變成可觀察的（observable）呢？

function observer(value) {
    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();/*訂閱者收到消息的回調*/
        }
    })
}

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

let app = new Vue({
    el: "#app",
    data: {
        text: "text",
        text2: "text2"
    },
    render(){
        console.log("render");
    }
})

為了便于理解，首先考慮一種最簡單的情況，不考慮數組等情況，代碼如上所示。在initData中會調用observe這個函數將Vue的數據設置成observable的。當_data數據發生改變的時候就會觸發set，對訂閱者進行回調（在這里是render）。

那么問題來了，需要對app._date.text操作才會觸發set。為了偷懶，我們需要一種方便的方法通過app.text直接設置就能觸發set對視圖進行重繪。那么就需要用到代理。

代理

我們可以在Vue的構造函數constructor中為data執行一個代理proxy。這樣我們就把data上面的屬性代理到了vm實例上。

_proxy(options.data);/*構造函數中*/

/*代理*/
function _proxy (data) {
    const that = this;
    Object.keys(data).forEach(key => {
        Object.defineProperty(that, key, {
            configurable: true,
            enumerable: true,
            get: function proxyGetter () {
                return that._data[key];
            },
            set: function proxySetter (val) {
                that._data[key] = val;
            }
        })
    });
}

我們就可以用app.text代替app._data.text了。

關于

作者：染陌

Email：answershuto@gmail.com or answershuto@126.com

Github: https://github.com/answershuto

Blog：http://answershuto.github.io/

知乎專欄：https://zhuanlan.zhihu.com/ranmo

掘金： https://juejin.im/user/58f87ae844d9040069ca7507

osChina：https://my.oschina.net/u/3161824/blog

轉載請注明出處，謝謝。

歡迎關注我的公眾號

云服務器 GPU云服務器響應式響應式布局響應式網站響應式設計

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

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

Vue 數據響應式原理

摘要：接下來，我們就一起深入了解的數據響應式原理，搞清楚響應式的實現機制。回調函數只是打印出新的得到的新的值，由執行后生成。及異步更新相信讀過前文，你應該對響應式原理有基本的認識。前言 Vue.js 的核心包括一套響應式系統。響應式，是指當數據改變后，Vue 會通知到使用該數據的代碼。例如，視圖渲染中使用了數據，數據改變后，視圖也會自動更新。舉個簡單的例子，對于模板： {{ name ...

Mike617 2019-08-23 11:46 評論0 收藏0
vue - 響應式原理梳理(一)

摘要：問題為什么修改即可觸發更新和的關聯關系官方介紹的官網文檔，對響應式屬性的原理有一個介紹。因此本文在源碼層面，對響應式原理進行梳理，對關鍵步驟進行解析。描述 ?我們通過一個簡單的 Vue應用來演示 Vue的響應式屬性： html： {{message}} js: let vm = new Vue({ el: #ap...

weknow619 2019-08-23 14:56 評論0 收藏0
[Vue.js進階]從源碼角度剖析計算屬性的原理

摘要：前言最近在學習計算屬性的源碼，發現和普通的響應式變量內部的實現還有一些不同，特地寫了這篇博客，記錄下自己學習的成果文中的源碼截圖只保留核心邏輯完整源碼地址可能需要了解一些響應式的原理版本計算屬性的概念一般的計算屬性值是一個函數，這個函數showImg(https://user-gold-cdn.xitu.io/2019/5/6/16a8b98f1361f6f6); 前言最近在學習Vue計...

melody_lql 2019-05-23 17:30 評論0 收藏0
vue.js響應式原理解析與實現

摘要：今天，就我們就來一步步解析響應式的原理，并且來實現一個簡單的。當然，這個也只是一個簡單的，來說明響應式的原理，真實的源碼會更加復雜，因為加了很多其他邏輯。接下來我可能會將其與聯系起來，實現和語法。從很久之前就已經接觸過了angularjs了，當時就已經了解到，angularjs是通過臟檢查來實現數據監測以及頁面更新渲染。之后，再接觸了vue.js，當時也一度很好奇vue.js是如何監...

Shihira 2019-08-26 12:24 評論0 收藏0