淺析vue的雙向數據綁定

2023年2月15日 126次阅读 来源: songxianling1992

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>

一切的代碼；複製到編輯器便可檢察結果了～～

    原文作者：songxianling1992
    原文地址: https://segmentfault.com/a/1190000014423018
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞