Vue双向绑定

目录

一、双向绑定概述

1.什么是双向绑定

2.具体步骤

二、双向绑定的实现

1.实现一个Observer（Object.defineProperty( ))

2.实现Watcher

3.实现Compile（事件监听）

---

一、双向绑定概述

1.什么是双向绑定

双向绑定是vue,js实现共享数据的一种手段；

采用的方式有：

• 数据劫持
• 发布者-订阅者模式

具体是通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

2.具体步骤

• 需要observer(观察者)对数据进行劫持并监听所有属性，如果有变动的，就通知订阅者

对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

• 通过Watcher(观察者)，接收属性的变化通知并执行相应的函数，从而更新视图 

 Watcher(订阅者)是Observer和Compile之间通信的桥梁，主要做的事情是:

• 在自身实例化时往属性订阅器(dep)里面添加自己
• 自身必须有一个update()方法
• 待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

• compile(模板解析器)解析模板指令

将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

大致流程如下：

 MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果

注：

• get和set就是关键字，是存储器属性
• get对应的方法称为getter，负责获取值，它不带任何参数。set对应的方法为setter，负责设置值，在它的函数体中，一切的return都是无效的。

Object.defineProperty() 方法：

数据劫持

语法：

Object.defineProperty(obj, prop, descriptor)

参数： 

• obj： 必需。目标对象；
• prop： 必需。需定义或修改的属性的名字；
• descriptor： 必需。目标属性所拥有的特性；

返回值：

传入函数的对象，即第一个参数obj；

例子：

var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
  set: function (value) {
    name = value;
    console.log('你取了一个书名叫做' + value);
  },
  get: function () {
    return '《' + name + '》'
  }
})
 
Book.name = 'vue权威指南';  // 你取了一个书名叫做vue权威指南
console.log(Book.name);  // 《vue权威指南》

二、双向绑定的实现

可参考：vue的双向绑定原理及实现 - canfoo#! - 博客园

1.实现一个Observer（Object.defineProperty( ))

Observer = (Object.defineProperty() 监听 + 递归 ) + 订阅器

Observer是一个数据监听器，其实现核心方法就是前文所说的Object.defineProperty( )。如果要对所有属性都进行监听的话，那么可以通过递归方法遍历所有属性值，并对其进行Object.defineProperty( )处理。如下代码，实现了一个Observer 

function defineReactive(data, key, val) {
    observe(val); // 递归遍历所有子属性
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            return val;
        },
        set: function(newVal) {
            val = newVal;
            console.log('属性' + key + '已经被监听了，现在值为：“' + newVal.toString() + '”');
        }
    });
}
 
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 = 'vue权威指南'; // 属性name已经被监听了，现在值为：“vue权威指南”
library.book2 = '没有此书籍';  // 属性book2已经被监听了，现在值为：“没有此书籍”

思路分析中，需要创建一个可以容纳订阅者的消息订阅器Dep，订阅器Dep主要负责收集订阅者，然后再属性变化的时候执行对应订阅者的更新函数。所以显然订阅器需要有一个容器，这个容器就是list，将上面的Observer稍微改造下，植入消息订阅器：
Observer一旦有了set触发，就会通知到Dep

function defineReactive(data, key, val) {
    // observe(val); // 递归遍历所有子属性
    // var dep = new Dep(); 
    Object.defineProperty(data, key, {
        // enumerable: true,
        // configurable: true,
        get: function() {
            //增加了这里
            //我们将订阅器Dep添加一个订阅者设计在getter里面，
            //这是为了让Watcher初始化进行触发，
            //因此需要判断是否要添加订阅者，至于具体设计方案，下文会详细说明的。
            if (是否需要添加订阅者) {
                dep.addSub(watcher); // 在这里添加一个订阅者
            }
            return val;
        },
        // set: function(newVal) {
        //     if (val === newVal) {
        //         return;
        //     }
        //     val = newVal;
        //     console.log('属性' + key + '已经被监听了，现在值为：“' + newVal.toString() + '”');
        //     dep.notify(); // 如果数据变化，通知所有订阅者
        // }
    });
}
 
//下面是订阅器
function Dep () {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};

在setter函数里面，如果数据变化，就会去通知所有订阅者，订阅者们就会去执行对应的更新的函数。到此为止，一个比较完整Observer已经实现了，接下来我们开始设计Watcher。

2.实现Watcher

• 订阅者Watcher在初始化的时候需要将自己添加进订阅器Dep中
• 而监听器Observer是在get函数执行了添加订阅者Wather的操作的，所以我们只要在订阅者Watcher初始化的时候触发对应的get函数去执行添加订阅者操作即可
• 这里还有一个细节点需要处理，我们只要在订阅者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;
    }
};

这时候，我们需要对监听器Observer也做个稍微调整，主要是对应Watcher类原型上的get函数。需要调整地方在于defineReactive函数：

function defineReactive(data, key, val) {
    // observe(val); // 递归遍历所有子属性
    // var dep = new 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;

3.实现Compile（事件监听）

虽然上面已经实现了一个双向数据绑定的例子，但是整个过程都没有去解析dom节点，而是直接固定某个节点进行替换数据的，所以接下来需要实现一个解析器Compile来做解析和绑定工作。解析器Compile实现步骤：

1. 解析模板指令，并替换模板数据，初始化视图
2. 将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器
3. 为了解析模板，首先需要获取到dom元素，然后对含有dom元素上含有指令的节点进行处理