vue2 Object.definProperty响应式原理（面试题）
注意：
响应式原理和双向数据绑定原理是两回事，一般面试官会先问响应式原理再问双向数据绑定的原理
详细文章
1.响应式原理
核心是数据劫持和依赖收集，是通过数据劫持结合发布者-订阅者模式的方式来实现的。通过.()为对象添加属性，然后为对象设置和方法，之后我们每次通过点语法获取属性就会执行方法，在这个方法中我们会把调用 此属性的依赖收集到一个集合中；而在我们给属性赋值(修改属性)时，会触发方法，然后去通知集合中的依赖更新，做到数据变更 驱动视图变更。
Object.defineProperty(obj, key, {// writable:true,// 可写// enumerable: true, // 可枚举// configurable: true, //可删除//拦截get，当我们访问data.key时会被这个方法拦截到get () {//我们在这里收集依赖return obj[key];},//拦截set，当我们为data.key赋值时会被这个方法拦截到set (newVal) {//当数据变更时，通知依赖项变更UI}
})
2. MVVM模式
MVVM框架的的核心就是双向绑定, 其原理是通过数据劫持+发布订阅模式相结合的方式来实现的，简单来说就是数据层发生变化的时候，可同步更新视图层，当视图层发生变化的时候，同步更新数据层
3. 如何实现？ Vue 类
首先我们实现一个 Vue 类，用于创建 vue对象，它的构造方法接收一个参数，用于初始化vue
class Vue {constructor(options){this.$el = options.el;this._data = options.data;this.$data = this._data// 对data进行响应式处理new Observe(this._data)}
}// 创建 vue 对象
new Vue ({el:'#app',data:{message:'hello world'}
})
上面的代码中我们首先创建了一个Vue的类，构造函数跟我们平时使用的Vue大致一致，为了容易理解我们这里只处理了参数el和data。
我们发现构造函数的最后一行创建了一个类的对象，并传入data作为参数，这里的就是对data数据进行响应式处理的类，接下来我们看一下类的简单实现。
类
(数据监听器:能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者)
我们在类中实现对data的监听，就是通过.()方法实现的数据劫持，代码如下：
class Observe {constructor(data){// 如果传入的数据是objectif(typeof data == 'object'){this.walk(data);}}// 这个方法遍历对象中的属性，并依次对其进行响应式处理walk(obj){// 获取所有属性const keys = Object.keys(obj);for ( let i = 0; i < keys.length; i++ ){// 对所有属性进行监听（数据劫持）this.defineReactive(obj,keys[i])}}defineReactive(obj,key){if (typeof obj[key] == 'object'){// 如果属性是对象，那么递归调用walk方法this.walk(obj[key]);}const dep = new Dep(); // Dep类用于收集依赖const val = obj[key];Object.defineProperty(obj,key,{enumerable:true,configurable:true,// get代理将Dep.target 即watcher对象添加到依赖集合中get(){// 这里在创建watcher对象时 会给Dep.target赋值if(Dep.target){dep.addSubs(Dep.target);}return val;},set(newVal){val = newVal;// 依赖的变更响应dep.notify(newVal);}})}
}
上述代码中我们使用到了Dep类，我们在劫持到的数据的get方法中收集到的依赖会被放到Dep类中保存。
Dep类
订阅器：订阅器采用 发布-订阅 设计模式，用来收集订阅者 ，对监听器 和 订阅者 进行统一管理。
下面代码是Dep类的实现，他有一个subs的数组，用于保存依赖，这里的依赖是我们后面要定义的，即观察者
class Dep (){static target = nullconstructor(){this.subs=[];}addSubs(watcher){this.subs.push(watcher)}notify(newVal){for(let i = 0; i < this.subs.length; i++){this.subs[i].update(newVal); }}
}
类
作为连接和的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
观察者类，它做的事情就是观察数据的变更，它会调用data中对应属性的get方法触发依赖收集，并在数据变更后执行相应的更新
let uid = 0;
class Watcher{// vm即一个vue对象，key要观察的属性，cb是观测到数据变化后需要做的操作，通常是指dom变更constructor(vm,key,cb){this.vm = vm;this.uid = uid++;this.cb = cb;// 调用get触发依赖收集之前，把自身赋值给Dep.taget静态变量Dep.target=this;// 触发对象上代理的get方法，执行get添加依赖this.value=vm.$data[key];//用完即清空Dep.target=null;}// 在调用set触发Dep的notify时要执行的update函数，用于响应数据变化执行run函数即dom变更update(newVal){// 值发生变化才变更if(this.value !== newVal){this.value = newVal;this.run()}}// 执行DOM更新等操作run(){this.cb(this.value);}
}
通过以上的代码我们就实现了一个去除了模板编译的简易版的Vue，我们用简单化模拟dom的变更
//======测试=======
let data={message:'hello',num:0
}
let app=new Vue({data:data
});
//模拟数据监听
new Watcher(app,'message',function(value){//模拟dom变更console.log('message 引起的dom变更--->',value); // world
})
new Watcher(app,'num',function(value){//模拟dom变更console.log('num 引起的dom变更--->',value); // 100
})
data.message='world';
data.num=100;
总结
1、实现一个监听器 ：对数据对象进行遍历，包括子属性对象的属性，利用 .() 对属性都加上 和 。这样的话，给这个对象的某个值赋值，就会触发 ，那么就能监听到了数据变化。并且可以拿到最新值通知订阅者。
2、实现一个订阅者 ： 订阅者是 和 之间通信的桥梁 ，主要的任务是订阅 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 中对应的更新函数。
3、实现一个解析器 ：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
4、实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 ，对监听器 和 订阅者 进行统一管理。
