vue的响应式原理（极其清晰易懂)

最新推荐文章于 2024-05-21 19:09:41 发布

htt2321

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量184

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43204464/article/details/127845618

版权

vue的响应式原理

1.发布订阅

（1）订阅器（dep）：

收集订阅者，发布通知

1.属性:subs，

接收订阅的实例

2.方法：addSub(watcher){}

收集订阅者的实例

3.方法：notify（）{}

发布通知

 const obj ={

     name:'万年青',

     job:'前端岗'

   }

    class Dep{

     constructor(){

       this.subs = []

     }

    

     addSub(watcher){

   this.subs.push(watcher)

     }

     notify(){

     this.subs.forEach(watcher =>watcher.update())



     }

    }

（2）订阅者（watcher）

：接收通知，执行更新

watcher是一个构造函数，接收三个参数

obj对象，key对象的属性，cb回调函数，只有一个方法叫update

updata在里面获取到指定属性的一个值，把值传递给回调函数

 class Watcher{

      constructor(data,key,cb){

        this.data = data

        this.key = key

        this.cb = cb

      }

      update(){

        const value = this.data【this.key】

        this.cb(value)

      }

    }

实例化了一个w1，这个w1是基于name属性，他有一个回调函数，回调函数就是执行的this.cb传入了一个参数

 //实例化订阅器

     const dep = new Dep()

     const w1 = new Watcher(obj,'name',val =>

     console.log('w1订阅者',val)

     )

     const w2 = new Watcher(obj,'job',val =>

     console.log('w2订阅者',val)

     )

     dep.addSub(w1)

     dep.addSub(w2)

     dep.notify()

2.数据劫持object.definde.property

object.definde.property方法，对对象的属性进行劫持，当访问对象属性的时候，就会触发存储描述符get，当修改对象的属性就会触发描述符set

 //用 Object.keys方法来获取obj属性的集合

 //用循环来获取里面的每一个属性

  Object.keys(obj).forEach(key => {

    let value = obj[key]

    Object.defineProperty(obj,key,{

      get(){

       console.log('触发了get',value )

       return value

      },

      set(nv){

        console.log('触发了set',nv)

        value = nv

      }

    })

  })