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就是通过这种发布者订阅者模式来处理响应式数据的。

下面的代码只是把整个响应式的过程解释了一下，但是源码并不是这么写的，但是整个流程是这样走滴，只不过我简化可很多~~希望大家能明白哈

　　// 他们全用了message

　　<div>{{message}}</div>

    <p>{{message}}</p>

    <i>{{message}}</i>

 

   data() {

      return {

　　　　　　message:'嘻嘻',

      　　name:'why'

　　　　}

 

    },       

 

  　　　　// data传进了new Vue里面。内部拿到了data'中的对象，嗯，就拿这个名字命名为obj把，        

　　　　　　 var obj={           

　　　　　　　　message:'哈哈',     

　　　　　     name:'why'          };

// 然后通过遍历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 变为 “哈哈”

分享就到这里了哈，楼楼有说的不好的地方，希望大家多多指点哈~~