vue数据双向绑定学习笔记。

时间  2019-12-05
标签 vue 数据 双向 绑定 学习 笔记 繁體版
原文   原文链接

什么是双向绑定

简单说就是在数据和UI之间创建双向的通讯通道，当用户经过Function改变了数据，那么这个改变也会当即反映到UI上；或者说用户经过UI的操做也会随之引发对应的数据变更。
Vue是如何实现双向数据绑定的？数据劫持？什么意思呢？太笼统了。与其说是数据劫持，更应该说是对象数据对象的setter和Getter实现劫持。可是Object.defineProperty仅仅是实现了对数据的监控，后续实现对UI的从新渲染并非它作的，因此这里还涉及到发布-订阅模式；过程是，当监控的数据对象被更改后，这个变动会被广播给全部订阅该数据的watcher，而后由该watcher实现对页面的从新渲染。
步骤：html

首先要对数据进行劫持，因此咱们须要设置一个监听器Observer，用来监听全部的属性。
若是属性发生变化，就须要告诉订阅者Watcher看是否须要更新。
订阅者是有不少个，因此咱们须要有一个消息订阅器Dep来专门收集这些订阅者，而后在监听器Observer和订阅者Watcher之间进行统一管理的。
还须要一个指令解析器Compile，对每一个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行相应的更新函数，从而更新视图。
1.实现一个监听器Observer，用来劫持并监听全部属性，若是有变更的，就通知订阅者。
2.实现一个订阅者Watcher，能够收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，能够扫描和解析每一个节点的相关指令，并根据初始化模板数据及初始化相应的订阅器。

流程图以下：
图片描述node

1.实现一个Observer

Observer是一个数据监听器，其实现核心方法就是Object.defineProperty().若是要对全部属性都进行监听的话，那么能够经过递归方法遍历全部属性值，并对其进行Object.defineProperty()处理。缓存

function defineReactive(data,key.val){
    observe(val);//递归遍历全部子属性
    Obejct.defineProperty(data,key,{
        enumerable:true,
        configurable:true,
        get:function(){
            return val;
        },
        set:function(newVal){
            val = newVal;
            console.log('属性'+key+'已经被监听了')
        }
    })
}
function observe(data){
    if(!data || typeof data !=='object'){
        return;
    }
    Object.keys(data).forEach(function(key){
        defineReactive(data,key,data[key])
    })
}
var library={
    book1:{
        name:''
    },
    book2:''
}
observe(library);
library.book1.name='123';
library.book2='456'

思路分析中，须要建立一个能够容纳订阅者的消息订阅器Dep，订阅器Dep主要负责收集订阅者，而后再属性变化的时候执行对应订阅者的更新函数。因此显然订阅者须要有一个容器，这个容器就是list，将上面的Observer稍微改造下，植入消息订阅者：app

function defineReactive(data,key,val){
    observe(val)//递归遍历全部子属性
    var dep = new Dep();
    Object.defineProperty(data,key,{
        enumerable:true,
        configurable:true,
        get:function(){
            if(是否须要添加订阅者){
                dep.addSub(watcher);//在这里添加一个订阅者
            }
            return val;
        },
        set:function(newVal){
            if(val === newVal){
                return;
            }
            val = newVal;
            console.log('属性'+key+'已经被监听了');
            dep.notify();//若是数据变化，通知订阅者
        }
    })
}
function Dep(){
    this.subs = [];
}
Dep.prototype={
    addSub:function(sub){
        this.subs.push(sub);
    },
    notify:function(){
        this.subs.forEach(function(sub){
            sub.update();
        })
    }
}

从代码上看，咱们将订阅器Dep添加一个订阅者设计在getter里面，这是为了让Watcher初始化进行触发，所以须要判断是否须要添加订阅者。在setter函数里面，若是数据变化，就会去通知全部订阅者，订阅者们就会去执行对应的更新函数。到此，一个比较完整的Obsever已经实现了，接下来咱们开始设计Watcher。dom

实现Watcher

订阅者Watcher在初始化的时候须要将本身添加进订阅器Dep中，那该如何添加呢？咱们已经知道监听器Observer是在get函数执行了添加订阅者Watcher的操做的，因此咱们只要在订阅者Watcher初始化的时候触发对应的get函数去执行添加订阅者操做便可，那要如何触发get的函数呢？只要获取对应的属性值就能够触发了，缘由就是咱们使用了Obejct.defineProperty()进行数据监听。这里还有一个细节点须要处理，咱们只要在订阅者Watcher初始化的时候才须要添加订阅者，因此须要作一个判断操做，所以能够在订阅器上作一下手脚：在Dep.target上缓存下订阅者，添加成功后再将其去掉就能够了。订阅者Watcher的实现以下：函数

function Watcher(vm,exp,cb){
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    this.value = this.get();//将本身添加到订阅器的操做
}
Watcher.prototype={
    update:function(){
        this.run();
    },
    run:function(){
        var value = this.vm.data[this.exp];
        var oldVal = this.value;
        if(value!==oldVal){
            this.value = value;
            this.cb.call(this.vm,value,oldVal)
        }
    },
    get:function(){
        Dep.target = this;//缓存本身
        var value = this.vm.data[this.exp]//强行执行监听器里的get函数
        Dep.target = null;//释放本身
        return value;
    }
}

到此为止，简单版的Watcher设计完毕，这时候咱们须要将Observer和Watcher关联起来，就能够实现一个简单的双向数据绑定了。
简单的例子：性能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1 id="name">{{name}}</h1>
</body>
<script> 
function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
};
function Dep () {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};
function Watcher(vm, exp, cb) {
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    this.value = this.get();  // 将本身添加到订阅器的操做
}
Watcher.prototype = {
    update: function() {
        var value = this.vm.data[this.exp];
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value;
            this.cb.call(this.vm, value, oldVal);
        }
    },
    get: function() {
        Dep.target = this;  // 缓存本身
        var value = this.vm.data[this.exp]  // 强制执行监听器里的get函数
        Dep.target = null;  // 释放本身
        return value;
    }
};
function defineReactive(data, key, val) {
    observe(val); // 递归遍历全部子属性
    var dep = new Dep(); 
    console.log(dep)
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            if (Dep.target) { // 判断是否须要添加订阅者
                dep.addSub(Dep.target); // 在这里添加一个订阅者
            }
            return val;
        },
        set: function(newVal) {
            if (val === newVal) {
                return;
            }
            val = newVal;
            console.log('属性' + key + '已经被监听了，如今值为：“' + newVal.toString() + '”');
            dep.notify(); // 若是数据变化，通知全部订阅者
        }
    });
}
Dep.target = null;
//在new SelfVue作一个代理，让访问selfVue的属性代理为访问selfVue.data的属性，实现原理仍是使用Object.defineProperty()对属性值再包一层。
function SelfVue (data, el, exp) {
    var self = this;
    this.data = data;
    Object.keys(data).forEach(function(key) {
        self.proxyKeys(key);  // 绑定代理属性
    });
    observe(data);
    el.innerHTML = this.data[exp];  // 初始化模板数据的值
    new Watcher(this, exp, function (value) {
        el.innerHTML = value;
    });
    return this;
}

SelfVue.prototype = {
    proxyKeys: function (key) {
        var self = this;
        Object.defineProperty(this, key, {
            enumerable: false,
            configurable: true,
            get: function proxyGetter() {
                return self.data[key];
            },
            set: function proxySetter(newVal) { 
                self.data[key] = newVal;
            }
        });
    }
}
var ele = document.querySelector('#name');
var selfVue = new SelfVue({
    name: 'hello world'
}, ele, 'name');
window.setTimeout(function () {
    console.log('name值改变了');
    selfVue.name = 'canfoo';
}, 2000);

</script>
</html>

3.实现Compile

虽然上面已经实现了一个双向数据绑定的例子，可是整个过程都没有去解析dom节点，而是直接固定某个节点进行替换数据的，因此接下来须要实现一个解析器Compile来作解析和绑定工做。解析器Compile实现步骤：
1.解析模板指令，并替换模板数据，初始化视图。
2.将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器
为了解析模板，首先须要获取dom元素，而后对含有dom元素上含有指令的节点进行处理，所以这个环节须要对dom操做比较频繁，因此能够先建一个fragment片断，将须要解析的dom节点存入fragment片断里再进行处理：ui

function nodeToFragment(el){
    var fragment = document.createDocumentFragment();
    var child = el.firstChild;
    while(child){
        //将Dom元素移入fragment中
        fragment.appendChild(child);
        child = el.firstChild
    }
    return fragment;
}

接下来须要遍历各个节点，对含有相关指定的节点进行特殊处理，这里先处理最简单的状况，只对带有{{变量}}这种形式的指令进行处理。this

function compileElement(el){
    var childNodes = el.childNodes;
    var self = this;
    [].slice.call(childNodes).forEach(function(node){
        var reg = /\{\(.*)\}\}/;
        var text = node.textContent;
        if(self.isTextNode(node)&&reg.test(text)){
            self.compileText(node,reg.exec(text)[1])
        }
        if(node.childNodes&&node.childNodes.length){
            self.compileElement(node);//继续递归遍历子节点。
        }
    })
}
function compileText(node,exp){
    var self = this;
    var initText = this.vm[exp];
    this.updateText(node,initText);
    new Watcher(this.vm,exp,function(value){
        self.updateText(node,value);
    })
}
function (node,value){
    node.tetxContent = typeof value =='undefined'?'':value;
}

获取到最外层节点后，调用compileElement函数，对全部子节点进行判断，若是节点是文本节点且匹配{{}}这种形式指令的节点就开始进行变异处理，编译处理首先须要初始化视图数据，对应上面所说的步骤1，接下来须要生成一个并绑定更新函数的订阅器，对应上面所说的步骤2.这样就完成指令的解析、初始化、编译三个过程，一个解析器Compile也就能够正常的工做了。为了将解析器Compile与监听器Obsever和订阅者Watcher关联起来，咱们须要再修改一下类SelfVue函数：spa

function SelfVue(options){
    var self = this;
    this.vm = this;
    this.data = options;
    Object.keys(this.data).forEach(function(key){
        self.proxyKeys(key);
    })
    observe(this.data);
    new Compile(options,this.vm);
    return this;
}

createDocumentFragment:
建立一个新的空白的文档片断。
语法：

let fragment = document.createDocumentFragment();

fragment是一个指向空DocumentFragment对象的引用。DocumentFragment是DOM节点。它们不是主dom数的一部分。一般的用例是建立文档片断，将元素附加到文档片断，而后将文档片断附加到DOM树。在DOM树中，文档片断被其全部的子元素所代替。
由于文档片断存在于内存中，并不在DOM树中，因此将子元素插入到文档片断时不会引发页面回流。所以使用文档片断一般会带来更好的性能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{title}}</h2>
    <h1>{{name}}</h1>
  </div>
</body>
<script> 

function Observer(data) {
    this.data = data;
    this.walk(data);
}
Observer.prototype = {
    walk: function(data) {
        var self = this;
        Object.keys(data).forEach(function(key) {
            self.defineReactive(data, key, data[key]);
        });
    },
    defineReactive: function(data, key, val) {
        var dep = new Dep();
        var childObj = observe(val);
        Object.defineProperty(data, key, {
            enumerable: true,
            configurable: true,
            get: function() {
                console.log(6)
                if (Dep.target) {
                    dep.addSub(Dep.target);
                }
                return val;
            },
            set: function(newVal) {
                console.log(5)
                if (newVal === val) {
                    return;
                }
                val = newVal;
                dep.notify();
            }
        });
    }
};
function observe(value, vm) {
    if (!value || typeof value !== 'object') {
        return;
    }
    return new Observer(value);
};
function Dep () {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};
Dep.target = null;
function Watcher(vm, exp, cb) {
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    this.value = this.get();  // 将本身添加到订阅器的操做
}
Watcher.prototype = {
    update: function() {
        this.run();
    },
    run: function() {
        var value = this.vm.data[this.exp];
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value;
            this.cb.call(this.vm, value, oldVal);
        }
    },
    get: function() {
        console.log(4)
        Dep.target = this;  // 缓存本身
        var value = this.vm.data[this.exp]  // 强制执行监听器里的get函数
        Dep.target = null;  // 释放本身
        return value;
    }
};
function SelfVue (options) {
    var self = this;
    this.vm = this;
    this.data = options.data;
    Object.keys(this.data).forEach(function(key) {
        self.proxyKeys(key);
    });
    observe(this.data);
    new Compile(options.el, this.vm);
    return this;
}
SelfVue.prototype = {
    proxyKeys: function (key) {
        var self = this;
        Object.defineProperty(this, key, {
            enumerable: false,
            configurable: true,
            get: function proxyGetter() {
                return self.data[key];
            },
            set: function proxySetter(newVal) {
                self.data[key] = newVal;
            }
        });
    }
}
function Compile(el, vm) {
    this.vm = vm;
    this.el = document.querySelector(el);
    this.fragment = null;
    this.init();
}
Compile.prototype = {
    init: function () {
        if (this.el) {
            this.fragment = this.nodeToFragment(this.el);
            this.compileElement(this.fragment);
            this.el.appendChild(this.fragment);
        } else {
            console.log('Dom元素不存在');
        }
    },
    nodeToFragment: function (el) {
        var fragment = document.createDocumentFragment();
        var child = el.firstChild;
        while (child) {
            // 将Dom元素移入fragment中
            fragment.appendChild(child);
            child = el.firstChild
        }
        return fragment;
    },
    compileElement: function (el) {
        var childNodes = el.childNodes;
        var self = this;
        [].slice.call(childNodes).forEach(function(node) {
            var reg = /\{\{(.*)\}\}/;
            var text = node.textContent;
            if (self.isTextNode(node) && reg.test(text)) {  // 判断是不是符合这种形式{{}}的指令
                self.compileText(node, reg.exec(text)[1]);
            }
            if (node.childNodes && node.childNodes.length) {
                self.compileElement(node);  // 继续递归遍历子节点
            }
        });
    },
    compileText: function(node, exp) {
        console.log(1)
        var self = this;
        var initText = this.vm[exp];
        this.updateText(node, initText);  // 将初始化的数据初始化到视图中
        new Watcher(this.vm, exp, function (value) { // 生成订阅器并绑定更新函数
            self.updateText(node, value);
        });
    },
    updateText: function (node, value) {
        console.log(2)
        node.textContent = typeof value == 'undefined' ? '' : value;
    },
    isTextNode: function(node) {
        return node.nodeType == 3;
    }
}
var selfVue = new SelfVue({
    el: '#app',
    data: {
        title: 'hello world',
        name: '13'
    }
});
// window.setTimeout(function () {
//     selfVue.title = '你好';
// }, 2000);
 
// window.setTimeout(function () {
//     selfVue.name = 'canfoo';
// }, 2500);

</script>
</html>
<script>
</script>

代码分析：

1.new SelfVue() 作了三件事：1.使用Object.definePrototype代理让访问selfVue的属性代理为访问selfVue.data的属性。2.一样使用Object.definePrototype数据劫持。3.new Compile()。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程