淺析vue的雙向資料繫結

songxianling1992發表於2019-02-16

1.原理

vue的雙向資料繫結的原理相信大家都十分了解；主要是通過ES5的Object物件的defineProperty屬性；重寫data的set和get函式來實現的

所以接下來不使用ES6進行實際的程式碼開發；過程中如果函式使用父級this的情況；還是使用顯示快取中間變數和閉包來處理；原因是箭頭函式沒有獨立的執行上下文this；所以箭頭函式內部出現this物件會直接訪問父級；所以也能看出箭頭函式是無法完全替代function的使用場景的；比如我們需要獨立的this或者argument的時候

1.2 defineProperty是什麼

語法：

Object.defineProperty(obj, prop, descriptor)
引數：
    obj：必要的目標物件
    prop：必要的需要定義或者修改的屬性名
    descriptor：必要的目標屬性全部擁有的屬性
返回值：
返回傳入的第一個函式；即第一個引數obj

該方法允許精確的新增或者修改物件的屬性；通過賦值來新增的普通屬性會建立在屬性列舉期間顯示（fon...in；object.key）；這些新增的值可以被改變也可以刪除；也可以給這個屬性設定一些特性；比如是否只讀不可寫；目前提供兩種形式：資料描述（set；get；value;writable;enumerable;confingurable）和存取器描述（set；get）

資料描述

當修改或者定義物件的某個屬性的時候；給這個屬性新增一些特性

var obj = {
    name:`xiangha`
}
// 物件已有的屬性新增特性描述
Object.defineProperty(obj,`name`,{
   configurable:true | false, // 如果是false則不可以刪除
   enumerable:true | false, // 如果為false則在列舉時候會忽略
   value:`任意型別的值,預設undefined`
   writable:true | false // 如果為false則不可採用資料運算子進行賦值
});
但是存在一個交叉；如果wrirable為true；而configurable為false的時候；所以需要列舉處理enumerable為false
--- 我是一個writable栗子 ---
var obj = {};
Object.defineProperty(obj,`val`,{
    value:`xiangha`,
    writable:false, // false
    enumerable:true,
    configurable:true
});
obj.val = `書記`; // 這個時候是更改不了a的
--- 我是一個configurable栗子 ---
var obj = {};
Object.defineProperty(obj,`val`,{
    value:`xiangha`,
    writable:true, // true
    enumerable:true,
    configurable:false  // false
});
obj.val = `書記`; // 這個時候是val發生了改變
delete obj.val 會返回false；並且val沒有刪除
--- 我是一個enumerable栗子 --- 
var obj = {};
Object.defineProperty(obj,`val`,{
    value:`xiangha`,
    writable:true,
    enumerable:false, // false
    configurable:true
});
for(var i in obj){
    console.log(obj[i]) // 沒有具體值
}

綜上：對於我們有影響主要是configurable控制是否可以刪除；writable控制是否可以修改賦值；enumerable是否可以列舉

所以說一旦使用Object.defineProperty()給物件新增屬性；那麼如果不設定屬性的特性；則預設值都為false

var obj = {}; 
Object.defineProperty(obj,`name`,{}); // 定義了心屬性name後；這個屬性的特性的值都為false；這就導致name這個是不能重寫不能列舉不能再次設定特性的
obj.name = `書記`; 
console.log(obj.name); // undefined
for(var i in obj){
    console.log(obj[i])
}

總結特性：

value：設定屬性的值
writable [`raɪtəbl] ：值是否可以重寫
enumerable [ɪ`nju:mərəbəl]：目標屬性是否可以被列舉
configurable [kən`fɪgərəbl]：目標屬性是否可以被刪除是否可以再次修改特性

存取器描述

var obj = {};
Object.defineProperty(obj,`name`,{
    get:function(){} | undefined,
    set:function(){} | undefined,
    configuracble:true | false,
    enumerable:true | false
})
注意：當前使用了setter和getter方法；不允許使用writable和value兩個屬性

gettet&& setter
當設定獲取物件的某個屬性的時候；可以提供getter和setter方法

var obj = {};
var value = `xiangha`;
Object.defineProperty(obj,`name`,{
    get:function(){
        // 獲取值觸發
        return value
    }，
    set：function(val){
        // 設定值的時候觸發；設定的新值通過引數val拿到
        value = val；
    }
});
console.log(obj.name); // xiangha
obj.name = `書記`;
console,.log(obj.name); // 書記

get和set不是必須成對出現對；任寫一個就行；如果不設定set和get方法；則為undefined

哈哈；前戲終於鋪墊完成了

補充：如果使用vue開發專案；嘗試去列印data物件的時候；會發現data內的每一個屬性都有get和set屬性方法；這裡說明一下vue和angular的雙向資料繫結不同

angular是用髒資料檢測；Model發生改變的時候；會檢測所有檢視是否繫結了相關的資料；再更新檢視

vue是使用的釋出訂閱模式；點對點的繫結資料

網上圖

2.實現

<div id="app">
    <form>
      <input type="text"  v-model="number">
      <button type="button" v-click="increment">增加</button>
    </form>
    <h3 v-bind="number"></h3>
  </div>

頁面很簡單；包含：

1. 一個input，使用v-model指令
2. 一個button，使用v-click指令
3. 一個h3，使用v-bind指令。

我們最後也會類似vue對方式來實現雙向資料繫結

var app = new xhVue({
      el:`#app`,
      data: {
        number: 0
      },
      methods: {
        increment: function() {
          this.number ++;
        },
      }
    })

2.1 定義

首先我們需要定義一個xhVue的建構函式

function xhVue(options){
    
}

2.2 新增

為了初始化這個建構函式；給其新增一個_init屬性

function xhVue(options){
    this._init(options);
}
xhVue.prototype._init = function(options){
    this.$options = options; // options為使用時傳入的結構體；包括el，data，methods等
    this.$el = document.querySelector(options.el); // el就是#app，this.$el是id為app的Element元素
    this.$data = options.data; // this.$data = {number:0}
    this.$methods = options.methods; // increment
}

2.3 改造升級

改造_init函式；並且實現_xhob函式；對data進行處理；重寫set和get函式

xhVue.prototype._xhob = function(obj){ // obj = {number:0}
    var value;
    for(key in obj){
        if(obj.hasOwnProperty(ket)){
            value = obj[key];
            if(typeof value === `object`){
                this._xhob(value);
            }
            Object.defineProperty(this.$data,key,{
                enumerable:true,
                configurable:true,
                get:function(){
                    return value;
                },
                set:function(newVal){
                    if(value !== newVal){
                        value = newVal;
                    }
                }
            })
        }
    }
}
xhVue.prototype._init = function(options){
    this.$options = options;
    this.$el = document.querySelector(options.el);
    this.$data = options.data;
    this.$method = options.methods;
    this._xhob(this.$data);
}

2.4 xhWatcher

指令類watcher；用來繫結更新函式；實現對DOM更新

function xhWatcher(name,el,vm,exp,attr){
    this.name = name; // 指令名稱；對於文字節點；例如text
    this.el = el; // 指令對應DOM元素
    this.vm = vm; // 指令所屬vue例項
    this.exp = exp; // 指令對應的值；例如number
    this.attr = attr; // 繫結的屬性值；例如innerHTML
    this.update();
}
xhWatcher.prototype.update = function(){
    this.el[this.attr] = this.vm.$data[this.exp];
    // 例如h3的innerHTML = this.data.number;當numner改變則會觸發本update方法；保證對應的DOM實時更新
}

2.5 完善_init和_xhob

繼續完善_init和_xhob函式

// 給init的時候增加一個物件來儲存model和view的對映關係；也就是我們前面定義的xhWatcher的例項；當model發生變化時；我們會觸發其中的指令另其更新；保證了view也同時更新
xhVue.prototype._init = function(options){
    this.$options = options;
    this.$el = document.querySelector(options.el);
    this.$data = options.data;
    this.$method = options.methods;
    
    this._binding = {}; // _binding
    this._xhob(this.$data);
}
// 通過init出來的_binding
xhVue.prototype._xhob = function(obj){ // obj = {number:0}
    var value;
    for(key in obj){
        if(obj.hasOwnProperty(ket)){
            this._binding[key] = {
                // _binding = {number:_directives:[]}
                _directives = []
            }
            value = obj[key];
            if(typeof value === `object`){
                this._xhob(value);
            }
            var binding = this._binding[key];
            Object.defineProperty(this.$data,key,{
                enumerable:true,
                configurable:true,
                get:function(){
                    return value;
                },
                set:function(newVal){
                    if(value !== newVal){
                        value = newVal;
                        // 當number改變時；觸發_binding[number]._directives中已繫結的xhWatcher更新
                        binding._directives.forEach(function(item){
                           item.update(); 
                        });
                    }
                }
            })
        }
    }
}

2.6 解析指令

怎麼才能將view與model繫結；我們定義一個_xhcomplie函式來解析我們的指令（v-bind；v-model；v-clickde）並這這個過程中對view和model進行繫結

xhVue.prototype._xhcompile = function (root) {
    // root是id為app的element的元素；也就是根元素
    var _this = this;
    var nodes = root.children;
    for (var i = 0,len = nodes.length; i < len; i++) {
        var node = nodes[i];
        if (node.children.length) {
            // 所有元素進行處理
            this._xhcompile(node)
        };
        // 如果有v-click屬性；我們監聽他的click事件；觸發increment事件，即number++
        if (node.hasAttribute(`v-click`)) {
            node.onclick = (function () {
                var attrVal = nodes[i].getAttribute(`v-click`);
                // bind讓data的作用域與methods函式的作用域保持一致
                return _this.$method[attrVal].bind(_this.$data);
            })();
        };
        // 如果有v-model屬性；並且元素是input或者textrea；我們監聽他的input事件
        if (node.hasAttribute(`v-model`) && (node.tagName = `INPUT` || node.tagName == `TEXTAREA`)) {
            node.addEventListener(`input`, (function (key) {
                var attrVal = node.getAttribute(`v-model`);
                _this._binding[attrVal]._directives.push(new xhWatcher(
                    `input`, 
                    node, 
                    _this,
                    attrVal, 
                    `value`
                ));
                return function () {
                    // 讓number的值和node的value保持一致；就實現了雙向資料繫結
                    _this.$data[attrVal] = nodes[key].value
                }
            })(i));
        };
        // 如果有v-bind屬性；我們要讓node的值實時更新為data中number的值
        if (node.hasAttribute(`v-bind`)) {
            var attrVal = node.getAttribute(`v-bind`);
            _this._binding[attrVal]._directives.push(new xhWatcher(
                `text`, 
                node, 
                _this,
                attrVal,
                `innerHTML`
            ))
        }
    }
}

並且將解析函式也加到_init函式中

xhVue.prototype._init = function(options){
    this.$options = options;
    this.$el = document.querySelector(options.el);
    this.$data = options.data;
    this.$method = options.methods;
    
    this._binding = {}; // _binding
    this._xhob(this.$data);
    this._xhcompile(this.$el);
}

最後

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <form>
            <input type="text" v-model="number">
            <button type="button" v-click="increment">增加</button>
        </form>
        <h3 v-bind="number"></h3>
    </div>
</body>
<script>
    function xhVue(options) {
        this._init(options);
    }
    xhVue.prototype._init = function (options) {
        this.$options = options;
        this.$el = document.querySelector(options.el);
        this.$data = options.data;
        this.$method = options.methods;

        this._binding = {}; // _binding
        this._xhob(this.$data);
        this._xhcompile(this.$el);
    }

    xhVue.prototype._xhob = function (obj) {
        var value;
        for (key in obj) {
            if (obj.hasOwnProperty(key)) {
                this._binding[key] = {
                    _directives: []
                }
                value = obj[key];
                if (typeof value === `object`) {
                    this._xhob(value);
                }
                var binding = this._binding[key];
                Object.defineProperty(this.$data, key, {
                    enumerable: true,
                    configurable: true,
                    get: function () {
                        console.log(`get${value}`)
                        return value;
                    },
                    set: function (newVal) {
                        if (value !== newVal) {
                            value = newVal;
                            console.log(`set${newVal}`)
                            // 當number改變時；觸發_binding[number]._directives中已繫結的xhWatcher更新
                            binding._directives.forEach(function (item) {
                                item.update();
                            });
                        }
                    }
                })
            }
        }
    }

    xhVue.prototype._xhcompile = function (root) {
        // root是id為app的element的元素；也就是根元素
        var _this = this;
        var nodes = root.children;
        for (var i = 0, len = nodes.length; i < len; i++) {
            var node = nodes[i];
            if (node.children.length) {
                // 所有元素進行處理
                this._xhcompile(node)
            };
            // 如果有v-click屬性；我們監聽他的click事件；觸發increment事件，即number++
            if (node.hasAttribute(`v-click`)) {
                node.onclick = (function () {
                    var attrVal = node.getAttribute(`v-click`);
                    console.log(attrVal);
                    // bind讓data的作用域與method函式的作用域保持一致
                    return _this.$method[attrVal].bind(_this.$data);
                })();
            };
            // 如果有v-model屬性；並且元素是input或者textrea；我們監聽他的input事件
            if (node.hasAttribute(`v-model`) && (node.tagName = `INPUT` || node.tagName == `TEXTAREA`)) {
                node.addEventListener(`input`, (function (key) {
                    var attrVal = node.getAttribute(`v-model`);
                    _this._binding[attrVal]._directives.push(new xhWatcher(
                        `input`,
                        node,
                        _this,
                        attrVal,
                        `value`
                    ));
                    return function () {
                        // 讓number的值和node的value保持一致；就實現了雙向資料繫結
                        _this.$data[attrVal] = nodes[key].value
                    }
                })(i));
            };
            // 如果有v-bind屬性；我們要讓node的值實時更新為data中number的值
            if (node.hasAttribute(`v-bind`)) {
                var attrVal = node.getAttribute(`v-bind`);
                _this._binding[attrVal]._directives.push(new xhWatcher(
                    `text`,
                    node,
                    _this,
                    attrVal,
                    `innerHTML`
                ))
            }
        }
    }

    function xhWatcher(name, el, vm, exp, attr) {
        this.name = name; // 指令名稱；對於文字節點；例如text
        this.el = el; // 指令對應DOM元素
        this.vm = vm; // 指令所屬vue例項
        this.exp = exp; // 指令對應的值；例如number
        this.attr = attr; // 繫結的屬性值；例如innerHTML
        this.update();
    }
    xhWatcher.prototype.update = function () {
        this.el[this.attr] = this.vm.$data[this.exp];
        // 例如h3的innerHTML = this.data.number;當numner改變則會觸發本update方法；保證對應的DOM實時更新
    }
    var app = new xhVue({
        el: `#app`,
        data: {
            number: 0
        },
        methods: {
            increment: function () {
                this.number++;
            }
        }
    });
</script>

</html>

所有的程式碼；複製到編輯器就可檢視效果了～～

Vue資料雙向繫結原理
2020-06-16
Vue
vue雙向資料繫結原理
2019-03-04
Vue
vue中的雙向資料繫結原理
2020-10-11
Vue
Vue 雙向資料繫結原理分析
2016-11-14
Vue
vue.js雙向資料繫結
2017-05-10
Vue.js
js 實現vue的雙向資料繫結
2018-11-21
JSVue
vue資料雙向繫結的實現原理
2018-10-11
Vue
原始碼分析：Vue的雙向資料繫結
2017-09-23
原始碼Vue
Vue props 雙向資料繫結方法
2017-06-07
Vue
Vue 中雙向繫結 Vs 單向資料流
2019-04-07
Vue
淺談 Checkbox Group 的雙向資料繫結
2021-01-13
vue 雙向繫結(v-model 雙向繫結、.sync 雙向繫結、.sync 傳物件)
2021-09-09
Vue物件
基於vue實現的雙向資料繫結
2018-05-24
Vue
揭密 Vue 的雙向繫結
2018-10-05
Vue
Vue雙向繫結初探
2019-04-09
Vue
vue雙向繫結原理
2018-03-25
Vue
JS雙向資料繫結
2018-12-05
JS
vue父子關係元件間的雙向資料繫結
2018-04-20
Vue元件
Vue資料繫結簡析
2019-05-06
Vue
vue雙向繫結盲區
2019-02-21
Vue
Vue雙向繫結實現
2018-09-25
Vue
Vue、MVVM、MVC、雙向繫結
2018-07-08
VueMVVMMVC
手動實現vue元件間的雙向資料繫結
2019-02-13
Vue元件
vue雙向繫結的原理及實現雙向繫結MVVM原始碼分析
2017-09-25
VueMVVM原始碼
原生js雙向資料繫結
2018-03-02
JS
[JS] 資料雙向繫結原理
2017-11-21
JS
0 到 1 掌握：Vue 核心之資料雙向繫結
2019-07-31
Vue
手動簡單實現Vue雙向資料繫結
2019-02-12
Vue
從單向到雙向資料繫結
2018-04-14
vue生命週期、雙向繫結
2019-03-19
Vue
vue實現prop雙向繫結
2019-01-18
Vue
vue實踐：元件雙向繫結
2018-10-31
Vue元件
vue v-model 雙向繫結
2024-04-21
Vue
javascript實現資料的雙向繫結（手動繫結）
2018-02-04
JavaScript
雙向資料繫結實現原理
2019-03-01
javascript實現雙向資料繫結
2018-04-19
JavaScript
雙向資料繫結是什麼
2024-03-01
梳理vue雙向繫結的實現原理
2019-02-14
Vue