Vue資料雙向繫結原理

WindrunnerMax發表於2020-06-16
Vue

Vue資料雙向繫結

Vue是通過資料劫持的方式來實現資料雙向資料繫結的，其中最核心的方法便是通過Object.defineProperty()來實現對屬性的劫持，該方法允許精確地新增或修改物件的屬性，對資料新增屬性描述符中的getter與setter實現劫持。

描述

執行一個Vue例項並將data列印，可以看到物件中對於msg有了get與set，通過他們就可以實現資料的劫持，從而進行資料的更新，在Vue中get與set是通過ES5的Object.defineProperty()方法定義的，該方法的具體功能可以查閱https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/defineProperty.md。

<!DOCTYPE html>
<html>
<head>
    <title>資料繫結</title>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
    </div> 
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Data'
        },
        created: function() {
            console.log(this.$data); //{__ob__: Observer} 
        }
    })
</script>
</html>

/*
{__ob__: Observer}
    msg: "Data"
    __ob__: Observer {value: {…}, dep: Dep, vmCount: 1}
    get msg: ƒ reactiveGetter()
    set msg: ƒ reactiveSetter(newVal)
    __proto__: Object
*/

分析實現

Vue的雙向資料繫結，簡單點來說分為以下三個部分：

  • Observer: 這裡的主要工作是遞迴地監聽物件上的所有屬性，在屬性值改變的時候，觸發相應的Watcher。
  • Watcher: 觀察者，當監聽的資料值修改時，執行響應的回撥函式，在Vue裡面的更新模板內容。
  • Dep: 連結Observer和Watcher的橋樑，每一個Observer對應一個Dep，它內部維護一個陣列，儲存與該Observer相關的Watcher。

根據上面的三部分實現一個功能非常簡單的Demo，實際Vue中的資料在頁面的更新是非同步的，且存在大量優化，實際非常複雜。
首先實現Dep方法，這是連結Observer和Watcher的橋樑，簡單來說，就是一個監聽者模式的事件匯流排，負責接收watcher並儲存。其中subscribers陣列用以儲存將要觸發的事件，addSub方法用以新增事件，notify方法用以觸發事件。

function __dep(){
    this.subscribers = [];
    this.addSub = function(watcher){
        if(__dep.target && !this.subscribers.includes(__dep.target) ) this.subscribers.push(watcher);
    }
    this.notifyAll = function(){
        this.subscribers.forEach( watcher => watcher.update());
    }
}

Observer方法就是將資料進行劫持，使用Object.defineProperty對屬性進行重定義，注意一個屬性描述符只能是資料描述符和存取描述符這兩者其中之一，不能同時是兩者，所以在這個小Demo中使用getter與setter操作的的是定義的value區域性變數，主要是利用了let的塊級作用域定義value區域性變數並利用閉包的原理實現了getter與setter操作value，對於每個資料繫結時都有一個自己的dep例項，利用這個匯流排來儲存關於這個屬性的Watcher，並在set更新資料的時候觸發。

function __observe(obj){
    for(let item in obj){
        let dep = new __dep();
        let value = obj[item];
        if (Object.prototype.toString.call(value) === "[object Object]") __observe(value);
        Object.defineProperty(obj, item, {
            configurable: true,
            enumerable: true,
            get: function reactiveGetter() {
                if(__dep.target) dep.addSub(__dep.target);
                return value;
            },
            set: function reactiveSetter(newVal) {
                if (value === newVal) return value;
                value = newVal;
                dep.notifyAll();
            }
        });
    }
    return obj;
}

Watcher方法傳入一個回撥函式，用以執行資料變更後的操作，一般是用來進行模板的渲染，update方法就是在資料變更後執行的方法，activeRun是首次進行繫結時執行的操作，關於這個操作中的__dep.target，他的主要目的是將執行回撥函式相關的資料進行sub，例如在回撥函式中用到了msg，那麼在執行這個activeRun的時候__dep.target就會指向this，然後執行fn()的時候會取得msg，此時就會觸發msg的get()，而get中會判斷這個__dep.target是不是空，此時這個__dep.target不為空，上文提到了每個屬性都會有一個自己的dep例項，此時這個__dep.target便加入自身例項的subscribers，在執行完之後，便將__dep.target設定為null，重複這個過程將所有的相關屬性與watcher進行了繫結，在相關屬性進行set時，就會觸發各個watcher的update然後執行渲染等操作。

function __watcher(fn){
    this.update = function(){
        fn();
    }
    
    this.activeRun = function(){
        __dep.target = this;
        fn();
        __dep.target = null;
    }
    this.activeRun();
}

程式碼示例

這是上述的小Demo的程式碼示例，其中上文沒有提到的__proxy函式主要是為了將vm.$data中的屬性直接代理到vm物件上，兩個watcher中第一個是為了列印並檢視資料，第二個是之前做的一個非常簡單的模板引擎的渲染，為了演示資料變更使得頁面資料重新渲染，在這個Demo下開啟控制檯，輸入vm.msg = 11;即可觸發頁面的資料更改，也可以通過在40行新增一行console.log(dep);來檢視每個屬性的dep繫結的watcher。

<!DOCTYPE html>
<html>
<head>
    <title>資料繫結</title>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{date}}</div>
    </div> 
</body>
<script type="text/javascript">

    var Mvvm = function(config) {
        this.$el = config.el;
        this.__root = document.querySelector(this.$el);
        this.__originHTML = this.__root.innerHTML;

        function __dep(){
            this.subscribers = [];
            this.addSub = function(watcher){
                if(__dep.target && !this.subscribers.includes(__dep.target) ) this.subscribers.push(watcher);
            }
            this.notifyAll = function(){
                this.subscribers.forEach( watcher => watcher.update());
            }
        }


        function __observe(obj){
            for(let item in obj){
                let dep = new __dep();
                let value = obj[item];
                if (Object.prototype.toString.call(value) === "[object Object]") __observe(value);
                Object.defineProperty(obj, item, {
                    configurable: true,
                    enumerable: true,
                    get: function reactiveGetter() {
                        if(__dep.target) dep.addSub(__dep.target);
                        return value;
                    },
                    set: function reactiveSetter(newVal) {
                        if (value === newVal) return value;
                        value = newVal;
                        dep.notifyAll();
                    }
                });
            }
            return obj;
        }

        this.$data = __observe(config.data);

        function __proxy (target) {
            for(let item in target){
                Object.defineProperty(this, item, {
                    configurable: true,
                    enumerable: true,
                    get: function proxyGetter() {
                        return this.$data[item];
                    },
                    set: function proxySetter(newVal) {
                        this.$data[item] = newVal;
                    }
                });
            }
        }

        __proxy.call(this, config.data);

        function __watcher(fn){
            this.update = function(){
                fn();
            }
            
            this.activeRun = function(){
                __dep.target = this;
                fn();
                __dep.target = null;
            }
            this.activeRun();
        }

        new __watcher(() => {
            console.log(this.msg, this.date);
        })

        new __watcher(() => {
            var html = String(this.__originHTML||'').replace(/"/g,'\\"').replace(/\s+|\r|\t|\n/g, ' ')
            .replace(/\{\{(.)*?\}\}/g, function(value){ 
                return  value.replace("{{",'"+(').replace("}}",')+"');
            })
            html = `var targetHTML = "${html}";return targetHTML;`;
            var parsedHTML = new Function(...Object.keys(this.$data), html)(...Object.values(this.$data));
            this.__root.innerHTML = parsedHTML;
        })

    }

    var vm = new Mvvm({
        el: "#app",
        data: {
            msg: "1",
            date: new Date(),
            obj: {
                a: 1,
                b: 11
            }
        }
    })

</script>
</html>

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://www.jianshu.com/p/255d4dec710a
https://www.jianshu.com/p/c8186e9e027b
https://www.cnblogs.com/wangjiachen666/p/9883916.html
https://blog.csdn.net/wangshu696/article/details/84570886
https://blog.csdn.net/qq_43051529/article/details/82877673
https://github.com/liutao/vue2.0-source/blob/master/%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.md

相關文章