vue - 響應(yīng)式原理梳理(一)

weknow619 發(fā)布于2019-08-23 14:56 / 1860人閱讀

摘要：?jiǎn)栴}為什么修改即可觸發(fā)更新和的關(guān)聯(lián)關(guān)系官方介紹的官網(wǎng)文檔，對(duì)響應(yīng)式屬性的原理有一個(gè)介紹。因此本文在源碼層面，對(duì)響應(yīng)式原理進(jìn)行梳理，對(duì)關(guān)鍵步驟進(jìn)行解析。

描述

?我們通過(guò)一個(gè)簡(jiǎn)單的 Vue應(yīng)用 來(lái)演示 Vue的響應(yīng)式屬性：

html：
    
        {{message}}
    
    
js:
    let vm = new Vue({
        el: "#app",
        data: {
            message: "123"
        }
    })

?在應(yīng)用中，message 屬性即為 響應(yīng)式屬性。

?我們通過(guò) vm.message, vm.$data.message, 可訪問(wèn) 響應(yīng)式屬性 message。

?當(dāng)我們通過(guò)修改 vm.message(vm.message = "456"), 修改后的數(shù)據(jù)會(huì) 更新到UI界面中。

問(wèn)題

為什么修改 vm.message, 即可觸發(fā) UI更新；

vm.message 和 data.message 的關(guān)聯(lián)關(guān)系；

官方介紹

? vue的官網(wǎng)文檔，對(duì)響應(yīng)式屬性的原理有一個(gè)介紹。

把一個(gè)普通的 JavaScript 對(duì)象傳給 Vue 實(shí)例的 data 選項(xiàng)，Vue 將遍歷此對(duì)象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。    每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對(duì)象，它會(huì)在組件渲染的過(guò)程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

?官方文檔

? 以上介紹，只是對(duì)響應(yīng)式原理進(jìn)行了簡(jiǎn)單描述，并沒(méi)有深入細(xì)節(jié)。因此本文在源碼層面，對(duì)響應(yīng)式原理進(jìn)行梳理，對(duì)關(guān)鍵步驟進(jìn)行解析。

? 響應(yīng)式原理涉及到的關(guān)鍵步驟如下：

構(gòu)建vue實(shí)例；

vue實(shí)例data屬性初始化，構(gòu)建響應(yīng)式屬性；

將vue實(shí)例對(duì)應(yīng)的template編譯為render函數(shù)；

構(gòu)建vue實(shí)例的watcher對(duì)象；

執(zhí)行render函數(shù)，構(gòu)建VNode節(jié)點(diǎn)樹(shù)，同時(shí)建立響應(yīng)式屬性和watcher對(duì)象的依賴關(guān)系；

將VNode節(jié)點(diǎn)渲染為dom節(jié)點(diǎn)樹(shù)；

修改響應(yīng)式屬性，觸發(fā)watcher的更新，重新執(zhí)行render函數(shù)，生成新的VNode節(jié)點(diǎn)樹(shù)；

對(duì)比新舊Vnode，重新渲染dom節(jié)點(diǎn)樹(shù)；

構(gòu)造函數(shù) - Vue

?Vue.js 給我們提供了一個(gè) 全局構(gòu)造函數(shù) Vue。

?通過(guò) new Vue(options) 生成一個(gè) vue實(shí)例，從而可以構(gòu)建一個(gè) Vue應(yīng)用。

?其中，options 為構(gòu)造vue實(shí)例的配置項(xiàng)，即為 { data, methods, computed, filter ... }

    /*
      options:
      {
        data: {...},
        methods: {...},
        computed: {...},
        watch: {...}
        ...
      }
    */
    function Vue (options) {
      if (process.env.NODE_ENV !== "production" &&
        !(this instanceof Vue)
      ) {
        warn("Vue is a constructor and should be called with the `new` keyword")
      }
      
      // 根據(jù)options， 初始化vue實(shí)例
      this._init(options)
    }
    
    export default Vue;

? vue實(shí)例 構(gòu)造完畢之后，執(zhí)行實(shí)例私有方法 _init(), 開(kāi)始初始化。

? 在一個(gè) vue應(yīng)用 中，存在兩種類型的 vue實(shí)例 ：根vue實(shí)例 和 組件vue實(shí)例。

? 根vue實(shí)例，由構(gòu)造函數(shù) Vue 生成。

? 組件vue實(shí)例，由組件構(gòu)造函數(shù) VueComponent 生成，組件構(gòu)造函數(shù) 繼承自構(gòu)造函數(shù) Vue。

    // 全局方法extend， 會(huì)返回一個(gè)組件構(gòu)造函數(shù)。
    Vue.extend = function(options) {
        ...
        
        // 組件構(gòu)造函數(shù)，用于創(chuàng)建組件
        var Sub = function VueComponent(options) {
            this._init(options);
        };
        // 子類的prototype繼承自Vue的prototype
        // 相當(dāng)于Sub實(shí)例可以使用Vue實(shí)例的方法
        Sub.prototype = Object.create(Vue.prototype);
        
        ...
        
        return Sub;
    }

? 通過(guò)一個(gè) 根vue實(shí)例 和多個(gè) 組件vue實(shí)例，構(gòu)成了整個(gè) Vue應(yīng)用。

Vue.prototype._init

? 在_init方法中，vue實(shí)例會(huì)執(zhí)行一系列初始化操作。

? 在初始化過(guò)程中，我們通過(guò)全局方法 initState 來(lái)初始化vue實(shí)例的 data、props、methods、computed、watch 屬性。

     Vue.prototype._init = function(options) {
        var vm = this;
        
        ...  // 其他初始化過(guò)程， 包括建立子vue實(shí)例和父vue實(shí)例的對(duì)應(yīng)關(guān)系、給vue實(shí)例添加自定義事件、執(zhí)行beforeCreated回調(diào)函數(shù)等
        
        // 初始化props屬性、data屬性、methods屬性、computed屬性、watch屬性
        initState(vm);
        
        ... // 其他初始化過(guò)程，比如執(zhí)行created回調(diào)函數(shù)
        
        // vue實(shí)例初始化完成以后，掛載vue實(shí)例，將模板渲染成html
        if(vm.$options.el) {
                vm.$mount(vm.$options.el);
        }
    };

    function initState (vm: Component) {
      vm._watchers = [];
      // new Vue(options) 中的 options
      const opts = vm.$options; 
      
      // 將props配置項(xiàng)中屬性轉(zhuǎn)化為vue實(shí)例的響應(yīng)式屬性
      if (opts.props) initProps(vm, opts.props); 
      
      // 將 methods配置項(xiàng)中的方法添加到 vue實(shí)例對(duì)象中
      if (opts.methods) initMethods(vm, opts.methods);
      
      // 將data配置項(xiàng)中的屬性轉(zhuǎn)化為vue實(shí)例的響應(yīng)式屬性
      if (opts.data) {
        initData(vm)
      } else {
        observe(vm._data = {}, true /* asRootData */)
      }
      ...
    }

? 其中，initData 方法會(huì)將 data配置項(xiàng) 中的屬性全部轉(zhuǎn)化為 vue實(shí)例 的 響應(yīng)式屬性。

initData

initData 方法的主要過(guò)程：

根據(jù)data配置項(xiàng)，創(chuàng)建vue實(shí)例的私有屬性: _data。

通過(guò) observe 方法，將 _data 對(duì)象中的屬性轉(zhuǎn)化為 響應(yīng)式屬性。

通過(guò)全局方法proxy, 建立 vue實(shí)例 和 _data 的關(guān)聯(lián)關(guān)系。

    function initData(vm) {
        // 獲取data配置項(xiàng)對(duì)象
        var data = vm.$options.data;
        // 組件實(shí)例的data配置項(xiàng)是一個(gè)函數(shù)
        data = vm._data = typeof data === "function"? getData(data, vm): data || {};
        
        // 獲取data配置項(xiàng)的屬性值
        var keys = Object.keys(data);
        // 獲取props配置項(xiàng)的屬性值
        var props = vm.$options.props;
        // 獲取methods配置項(xiàng)的屬性值；
        var methods = vm.$options.methods;
        var i = keys.length;
        
        while(i--) {
            var key = keys[i];
            {
                // methods配置項(xiàng)和data配置項(xiàng)中的屬性不能同名
                if(methods && hasOwn(methods, key)) {
                    warn(
                        ("method "" + key + "" has already been defined as a data property."),
                        vm
                    );
                }
            }
            // props配置項(xiàng)和data配置項(xiàng)中的屬性不能同名
            if(props && hasOwn(props, key)) {
                "development" !== "production" && warn(
                    "The data property "" + key + "" is already declared as a prop. " +
                    "Use prop default value instead.",
                    vm
                );
            } else if(!isReserved(key)) { // 如果屬性不是$,_ 開(kāi)頭(vue的保留屬性)
                // 建立 vue實(shí)例 和 _data 的關(guān)聯(lián)關(guān)系性
                proxy(vm, "_data", key);
            }
        }
        // 觀察data對(duì)象， 將對(duì)象屬性全部轉(zhuǎn)化為響應(yīng)式屬性
        observe(data, true /* asRootData */);
    }

observe

? 全局方法 observe 的作用是用來(lái)觀察一個(gè)對(duì)象，將_data對(duì)象的屬性全部轉(zhuǎn)化為 響應(yīng)式屬性。

    // observe(_data, true)
    function observe(value, asRootData) {
        if(!isObject(value)) {
            return
        }
        var ob;
       ...
       // 
       ob = new Observer(value);
       
       ...
       
       return ob;
    }


    var Observer = function Observer(value) {
        ...
        
        if(Array.isArray(value)) {
            // 如果value是數(shù)組，對(duì)數(shù)組每一個(gè)元素執(zhí)行observe方法
            this.observeArray(value);
        } else {
            // 如果value是對(duì)象， 遍歷對(duì)象的每一個(gè)屬性， 將屬性轉(zhuǎn)化為響應(yīng)式屬性
            this.walk(value);
        }
    };
    
    // 如果要觀察的對(duì)象時(shí)數(shù)組， 遍歷數(shù)組，然后調(diào)用observe方法將對(duì)象的屬性轉(zhuǎn)化為響應(yīng)式屬性
    Observer.prototype.observeArray = function observeArray(items) {
        for(var i = 0, l = items.length; i < l; i++) {
            observe(items[i]);
        }
    };
    
    
     // 遍歷obj的屬性，將obj對(duì)象的屬性轉(zhuǎn)化為響應(yīng)式屬性
    Observer.prototype.walk = function walk(obj) {
        var keys = Object.keys(obj);
        for(var i = 0; i < keys.length; i++) {
           // 給obj的每一個(gè)屬性都賦予getter/setter方法。
           // 這樣一旦屬性被訪問(wèn)或者更新，這樣我們就可以追蹤到這些變化
            defineReactive(obj, keys[i], obj[keys[i]]);
        }
    };

defineReactive

? 通過(guò) defineProperty 方法，提供屬性的 getter/setter 方法。

? 讀取屬性時(shí)，觸發(fā) getter，將與響應(yīng)式屬性相關(guān)的vue實(shí)例保存起來(lái)。

? 修改屬性時(shí)，觸發(fā) setter，更新與響應(yīng)式屬性相關(guān)的vue實(shí)例。

    function defineReactive(obj, key, val, customSetter, shallow) {
        // 每一個(gè)響應(yīng)式屬性都會(huì)有一個(gè) Dep對(duì)象實(shí)例， 該對(duì)象實(shí)例會(huì)存儲(chǔ)訂閱它的Watcher對(duì)象實(shí)例
        var dep = new Dep();
        
        // 獲取對(duì)象屬性key的描述對(duì)象
        var property = Object.getOwnPropertyDescriptor(obj, key);
        
        // 如果屬性是不可配置的，則直接返回
        if(property && property.configurable === false) {
            return
        }

        // 屬性原來(lái)的getter/setter
        var getter = property && property.get;
        var setter = property && property.set;
        
        // 如果屬性值是一個(gè)對(duì)象，遞歸觀察屬性值，
        var childOb = !shallow && observe(val);
        
        // 重新定義對(duì)象obj的屬性key
        Object.defineProperty(obj, key, {
            enumerable : true,
            configurable : true,
            get : function reactiveGetter() {
                // 當(dāng)obj的某個(gè)屬性被訪問(wèn)的時(shí)候，就會(huì)調(diào)用getter方法。
                var value = getter ? getter.call(obj) : val;
                
                
                // 當(dāng)Dep.target不為空時(shí)，調(diào)用dep.depend 和 childOb.dep.depend方法做依賴收集
                if(Dep.target) {
                
                    // 通過(guò)dep對(duì)象， 收集依賴關(guān)系
                    dep.depend();
                    if(childOb) {
                        childOb.dep.depend();
                    }
                    // 如果訪問(wèn)的是一個(gè)數(shù)組， 則會(huì)遍歷這個(gè)數(shù)組， 收集數(shù)組元素的依賴
                    if(Array.isArray(value)) {
                        dependArray(value);
                    }
                }
                return value
            },
            set : function reactiveSetter(newVal) {
                // 當(dāng)改變obj的屬性是，就會(huì)調(diào)用setter方法。這是就會(huì)調(diào)用dep.notify方法進(jìn)行通知
                var value = getter ? getter.call(obj) : val;
                /* eslint-disable no-self-compare */
                if(newVal === value || (newVal !== newVal && value !== value)) {
                    return
                }
                /* eslint-enable no-self-compare */
                if("development" !== "production" && customSetter) {
                    customSetter();
                }
                if(setter) {
                    setter.call(obj, newVal);
                } else {
                    val = newVal;
                }
                childOb = !shallow && observe(newVal);
                // 當(dāng)響應(yīng)式屬性發(fā)生修改時(shí)，通過(guò)dep對(duì)象通知依賴的vue實(shí)例進(jìn)行更新
                dep.notify();
            }
        });
    }

? 響應(yīng)式屬性，通過(guò)一個(gè) dep 對(duì)象， 收集依賴響應(yīng)式屬性的vue實(shí)例，在屬性改變時(shí) 通知vue實(shí)例更新。

? 一個(gè) 響應(yīng)式屬性，對(duì)應(yīng)一個(gè) dep 對(duì)象。

Dep

? 在觀察者設(shè)計(jì)模式中，有兩種角色：Subject 和 Observer。

? Subject 會(huì)維護(hù)一個(gè) Observer的依賴列表。當(dāng) Subject 發(fā)生變化時(shí)，會(huì)通知 Observer 更新。

? 在vue中，響應(yīng)式屬性作為Subject， vue實(shí)例作為Observer，響應(yīng)式屬性的更新會(huì)通知vue實(shí)例更新。

? 響應(yīng)式屬性通過(guò) dep 對(duì)象來(lái)收集 依賴關(guān)系 。一個(gè)響應(yīng)式屬性，對(duì)應(yīng)一個(gè)dep對(duì)象。

    var Dep = function Dep() {
        // dep對(duì)象的id
        this.id = uid++;
        // 數(shù)組，用來(lái)存儲(chǔ)依賴響應(yīng)式屬性的Observer
        this.subs = [];
    };
    
    // 將Observer添加到dep對(duì)象的依賴列表中
    Dep.prototype.addSub = function addSub(sub) {
        // Dep對(duì)象實(shí)例添加訂閱它的Watcher
        this.subs.push(sub);
    };
    
    // 將Observer從dep對(duì)象的依賴列表中刪除
    Dep.prototype.removeSub = function removeSub(sub) {
        // Dep對(duì)象實(shí)例移除訂閱它的Watcher
        remove(this.subs, sub);
    };
    
    // 收集依賴關(guān)系
    Dep.prototype.depend = function depend() {
        // 把當(dāng)前Dep對(duì)象實(shí)例添加到當(dāng)前正在計(jì)算的Watcher的依賴中
        if(Dep.target) {
            Dep.target.addDep(this);
        }
    };
    
    // 通知Observer更新
    Dep.prototype.notify = function notify() {
        // stabilize the subscriber list first
        var subs = this.subs.slice();
        // 遍歷所有的訂閱Watcher，然后調(diào)用他們的update方法
        for(var i = 0, l = subs.length; i < l; i++) {
            subs[i].update();
        }
    };

proxy

? 通過(guò) defineProperty 方法，給vue實(shí)例對(duì)象添加屬性，提供屬性的 getter/setter 方法。

? 讀取vue實(shí)例的屬性( data配置項(xiàng)中的同名屬性 ), 觸發(fā) getter，讀取 _data 的同名屬性。

? 修改vue實(shí)例的屬性( data配置項(xiàng)中的同名屬性 ), 觸發(fā) setter，修改 _data 的同名屬性。

    // proxy(vm, _data, "message")
    function proxy(target, sourceKey, key) {
        sharedPropertyDefinition.get = function proxyGetter() {
            return this[sourceKey][key]
        };
        sharedPropertyDefinition.set = function proxySetter(val) {
            this[sourceKey][key] = val;
        };
        Object.defineProperty(target, key, sharedPropertyDefinition);
    }

? 通過(guò) proxy 方法，vue實(shí)例 可代理私有屬性 _data, 即通過(guò) vue實(shí)例 可以訪問(wèn)/修改 響應(yīng)式屬性。

總結(jié)

? 結(jié)合源碼理解， 響應(yīng)式屬性 的原理為:

GPU云服務(wù)器云服務(wù)器響應(yīng)式響應(yīng)式布局響應(yīng)式網(wǎng)站響應(yīng)式設(shè)計(jì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101374.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

weknow619

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

C語(yǔ)言學(xué)習(xí)筆記—P15（指針＜初階＞+圖解+題例）

閱讀 1784·2021-11-19 09:40
#超值羊毛#騰訊云：免費(fèi)送2C4G50G SSD6M KVM VPS一臺(tái)，免費(fèi)一年

閱讀 2998·2021-09-24 10:27
【劍指offer】一個(gè)數(shù)的二進(jìn)制序列中1的個(gè)數(shù)

閱讀 3284·2021-09-02 15:15
前端技術(shù)演進(jìn)（五）：現(xiàn)代前端交互框架

閱讀 1944·2019-08-30 15:54
【響應(yīng)式布局】initial containing block、viewport以及相關(guān)尺寸

閱讀 1274·2019-08-30 15:54
回到頂部效果之加速置頂

閱讀 1425·2019-08-30 13:12
CSS3：不可思議的border屬性

閱讀 699·2019-08-28 18:05
Webservice On Netty

閱讀 2873·2019-08-27 10:53

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

vue - 響應(yīng)式原理梳理(一)

相關(guān)文章

vue - 響應(yīng)式原理梳理(二)

JS核心知識(shí)點(diǎn)梳理——原型、繼承（下）

vue總結(jié)系列--數(shù)據(jù)驅(qū)動(dòng)和響應(yīng)式

Vue 數(shù)據(jù)響應(yīng)式原理

**淺談Vue中計(jì)算屬性computed的實(shí)現(xiàn)原理**

發(fā)表評(píng)論

0條評(píng)論

weknow619

男|高級(jí)講師

TA的文章

C語(yǔ)言學(xué)習(xí)筆記—P15（指針＜初階＞+圖解+題例）

#超值羊毛#騰訊云：免費(fèi)送2C4G50G SSD6M KVM VPS一臺(tái)，免費(fèi)一年

【劍指offer】一個(gè)數(shù)的二進(jìn)制序列中1的個(gè)數(shù)

前端技術(shù)演進(jìn)（五）：現(xiàn)代前端交互框架

【響應(yīng)式布局】initial containing block、viewport以及相關(guān)尺寸

回到頂部效果之加速置頂

CSS3：不可思議的border屬性

Webservice On Netty

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

vue - 響應(yīng)式原理梳理(一)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！