、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图4、mvvm入口函数，整合以上三者

一共分四步, 每一步都有大堆解释和一大堆的代码, 然而我真的只是一个 名副其实的理工科生,看到了文中的发布者-订阅者模式, 于是乎我去网上各种百度, 个人理解就是getter函数里面执行的任务就是watcher订阅者, 而setter函数执行的任务就是发布者; 相信很多人看过了这个也是一知半解, 下面我来解释一波:

ECMAScript中有两种属性:数据属性和访问器属性,数据属性一般用于存储数据数值, 访问器属性对应的是set/get操作, 不能直接存储数据值, 每种属性下面又都含有四个特性.下面介绍一下:

数据属性

1.[[Configurable]]: 表示能否通过delete将属性删除，能否把属性修改为访问器属性, 默认为false。当把属性Configurable设置为false后，该属性不能通过delete删除，并且也无法再将该属性的Configurable设置回true

2.[[Enumerable]]: 表示属性可否被枚举(即是否可以通过for in循环返回)，默认false3.[[Writable]]: 表示属性是否可写(即是否可以修改属性的值)，默认false4.[[Value]]: 该属性的数据值, 默认是undefined访问器属性

1.[[Configurable]]: 表示能否通过delete将属性删除，能否把属性修改为数据属性, 默认为false。当把属性Configurable设置为false后，该属性不能通过delete删除，并且也无法再将该属性的Configurable设置回true

2.[[Enumerable]]: 表示属性可否被枚举(即是否可以通过for in循环返回)，默认false3.[[Get]]: 读取属性时调用的函数, 默认为undefined4.[[Set]]: 写入属性时调用的函数, 默认是undefined

在修改属性的特性或者定义访问器属性的时候, 需要借助ECMAScript 5中的一个方法: Object.defineProperty(), 这个方法接收三个参数: 属性所在对象, 属性的名字, 描述符对象; 为对象定义多个属性的话, 就用函数的复数写法:Object.defineProperties();

目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

实现数据绑定的做法有大致如下几种：

发布者-订阅者模式（backbone.js）

脏值检查（angular.js）

数据劫持（vue.js）

1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者

vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。

属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。

然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。

目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

实现数据绑定的做法有大致如下几种：

发布者-订阅者模式（backbone.js）

脏值检查（angular.js）

数据劫持（vue.js）

vue实现双向数据绑定的原理主要是通过数据劫持结合观察者模式来实现的.

1. 数据劫持

数据劫持主要是使用Object.defineProperty()这个API对所有数据进行代理(劫持). 你可以任务Object.defineProperty()是另外一种定义数据的方式, 通过这种方式定义的数据, 数据的操作可以被监视到. Object.defineProperty()的基本语法格式如下:

Object.defineProperty(变量所属对象,变量名,{
  get(){
      // 当读取变量的时候,get方法会被自动触发,并且变量的值是由get方法的返回值来决定的
            
  },
  set(newValue){
    // 当对变量进行赋值的时候,set方法会被自动触发,并且系统会将变量的最新赋值通过形参传入set方法内部
   }
});

接下来演示一下如何实现批量劫持数据:

    const data={
        msg:'hello',
        title:'数据劫持'
    }

    Object.keys(data).forEach(key=>{
        // 将对象属性值保存到局部变量value中,方便操作
        let value=data[key];
        Object.defineProperty(data,key,{
            get(){
                return value;
            },
            set(newValue){
                value=newValue;
            }
        });
    });

2. 观察者模式

观察者模式的核心就在将某个操作收集起来, 一般会议对象的方式存储, 然后在某个特定的时间点通过循环遍历的方式一次执行这些操作对象. 这个过程就和订阅报纸的过程非常相似, 所以有些时候也称为发布者订阅者模式. 接下来演示一下通过JS实现观察者模式:

// 发布者订阅者模式
class PubSub {
    constructor() {
        // 存放订阅者的对象
        // this.subs={msg:[callback],msg2:[callback2]}
        this.subs = {};
    }
    /**
     * 订阅方法
     * @param {*} key 订阅对象名称
     * @param {*} callback 回调函数   
     */
    subscribe(message, callback) {
        // 如果对象元素存在, 则为其创建一个空数组
        this.subs[message] = this.subs[message] ? this.subs[message] : [];
        this.subs[message].push(callback);
    }

    /**
     * 发布消息(通知订阅对象)
     * key: 订阅对象名称
     * data: 额外参数
     */
    publish(key, data) {
        if (this.subs[key]) {
            this.subs[key].forEach(callback => {
                // 执行订阅者的处理函数
                callback && callback(data);
            });
        }
    }
}
// 创建一个实例对象
const pubsub = new PubSub();

// 订阅消息message
pubsub.subscribe('message', function (data) {
 console.log('收到新短消息:', data);
});

// 发布消息, 通知订阅者
pubsub.publish('message', {
    title: '新闻标题'
});