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 变为 “哈哈”

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

posted on 2019-11-08 16:50  qq575654643  阅读(126)  评论(0编辑  收藏  举报