vue学习之深入响应式原理
vue的响应式原理
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
’Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。每个组件实例都对应一个 watcher 实例，它会在组件
渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
通过这么长时间的学习，我用比较直白的话来详细的解释一下原理
首先咱们需要掌握两个方法
一个是Object.defineProperty，一个是订阅者设计模式
Object.defineProperty方法
Object.defineProperty会直接在一个对象上定义一个新属性或者修改一个对象的现有属性，并且返回这个对象。
Object.defineProperty（obj，prop，descriptor）有三个属性。obj是要定义属性的对象。prop是需要定义或者修改的属性的名称，descrptor是被定义或修改的属性描述符。
setter或者getter是js对象中用来设置属性或获取属性的方法，他是在创建对象的时候指明的。
当data对象中有值存在时，vue就会获取这个对象，获取这个对象的时候就会调用get，然后会用Object.keys（）方法拿到这个data对象中的每个属性，
然后进行遍历，得到每个属性，然后通过Object.defineProperty的set和get方法进行设置属性值或者是获取属性值。
发布-订阅模式
举个例子来说明一下发布者订阅者模式。上面的例子中，就是让张三和李四来订阅了这个message属性的改变。
发布-订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。而
是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在。同样的，订阅者可以表达对一个或多个类别的兴趣，
只接收感兴趣的消息，无需了解哪些发布者（如果有的话）存在。
举一个例子，你在微博上关注了A，同时其他很多人也关注了A，那么当A发布动态的时候，微博就会为你们推送这条动态。
A就是发布者，你是订阅者，微博就是调度中心，你和A是没有直接的消息往来的，全是通过微博来协调的（你的关注，A的发布动态）。
vue就是通过这种发布者订阅者模式来处理响应式数据的。
下面的代码只是把整个响应式的过程解释了一下，但是源码并不是这么写的，但是整个流程是这样走滴，只不过我简化可很多~~希望大家能明白哈
// 然后通过遍历obj这个对象拿到这个属性------
// Object.keys(obj)返回的是一个数组形式的这个对象的属性 // key代表的是每个属性 Object.keys(obj).forEach(key => { // 拿到这个属性 let value=obj[key] Object.defineProperty(obj,key,{
// 设置属性 set(newValue) { // 可以在这个位置监听key的改变 value=newValue
// dep.notify() 然后在类似这个地方通知订阅者发生改变
<!-- 发生改变的时候，需要获取到谁在用这个值，假如这里有俩个人在用张三和李四，此时就需要对每个用到message进行解析，
根据解析html代码，来获取到哪些人在用这些属性，他在获取message里的
值的时候，他会调用一下get方法，谁用这个message，谁都会调取一次get，到时候就能知道到底是谁调用了这个message，
一旦newValue发生改变，就会通知这三个人,然后会通知这三个人，让这三个人把界面更新一下 get方法---自身的update方法
这时候就需要用发布订阅者模式来监听，让这三个人订阅这个属性的改变-->
console.log('监听'+key+'改变'+':'+value) }, get() {
在类似这个的地方创建一个watch的对象。来获取每个订阅者
// const wat1=new Watcher('涵涵');
console.log('获取'+key+'对应的值')
return value } }) }) // 他就会执行对象里的set属性，把他的名字设置成'hanhan' obj.name='hanhan'
我们把多个订阅者对象添加到发布者里面，一旦值发生改变，发布者只要去调用了自己的notify，就会立马通知之前所有的订阅者，
订阅者是一个数组，遍历数组里的每个成员，数组里面每个成员都有watch，通知订阅者去更新自己的update。然后进行更新界面
// 发布者 class Dep { constructor() { // 订阅了一个数组,用这个数组去记录所有的订阅者 this.subscription=[] } // 加入订阅者，加进去这个人，也就是张三李四，这两个人 addSub(watch) { this.subscription.push(watch) }; notify() { this.subscription.forEach(item=>{ // 调用它自己的unpate去更新 item.update() }) } } // 观察者，用于监听观察，通过这个类创建对象， // 订阅者 class Watcher { constructor(name) { this.name=name; } update() { // 把自己的内容进行更新 console.log(this.name+'发生update') } } // 实例一个dep对象 const dep=new Dep(); const wat1=new Watcher('张三'); dep.addSub(wat1) //张三就被订阅者放到了subscription的数组里面 const wat2=new Watcher('李四'); dep.addSub(wat1) //李四就被订阅者放到了subscription的数组里面 dep.notify()//这里定义notify，那么刚才的两个订阅者，就全被我通知到了 }
下面我用一张图对上面的内容进行一个总结吧，总结的比较肤浅，都是表面的知识，希望大家多多指点，一块进步哈。
observer主要是对data对象中的数据进行了劫持监听，利用Object.defineProperty，一个属性对应一个dep对象，name有一个dep对象，age有一个dep对象，
他们是一一对应的关系，每个dep对象里面都 有他的观察者对象，观察者1，观察者2...当属性值发生变化的时候就会去调用dep中的notify，通知watcher，利用watcher去更新视图。
当el传进complie里面时，主要是做了两件事
一是解析html，创建对应的watcher，放到对应的observer中的dep对象中去，具体怎么放得，上面有说哈，
二是他还会根据el中的内容初始化view，也就是解析咱们的{{message}}，在界面中显示出 “嘻嘻”。
假如我们把name中的属性值改成了 '哈哈 ',那么observer中的Object.defineProperty立马会监听到值的改变，调用notify的方法，遍历watcher，进行update，然后更新视图，把 why 变为 “哈哈”
分享就到这里了哈，楼楼有说的不好的地方，希望大家多多指点哈~~
