Vue3响应式原理实现

最新推荐文章于 2024-04-19 21:34:06 发布

coderlmw

最新推荐文章于 2024-04-19 21:34:06 发布

阅读量383

点赞数

文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/weixin_46116715/article/details/122374556

版权

Vue3响应式原理实现

1、响应式的概念

比如对象的属性有一个初始化的值，有一段代码使用了这个值、那么在对象中的属性发生变化时，这段代码可以自动重新执行

2、响应式函数实现

把与对象属性相关函数 (下面称为对象的依赖) 放到一个数组中

如果属性发生变化会重新执行属性的依赖函数

let reactiveFns = []
function watchFn(fn) {
   
  reactiveFns.push(fn)
}

let obj = {
   
  name: 'lmw',
}
watchFn(function () {
   
  console.log('----------', obj.name)
})

// 如果修改了obj.name中的值 那么 会把与obj.name有关的函数再执行一遍
// 例如
obj.name = 'wml'
reactiveFns.forEach((fn) => {
   
  fn()
})

3、对依赖收集进行封装

上面写的代码只能收集name一个属性，但是在开发中所有对象不可能都只有一个属性，每一个属性就多写一个数组来收集这显然是不现实的，所以这里我们可以封装一个类来收集

class Depend {
   
  constructor() {
   
    // 用于存放依赖
    this.reactiveFns = []
  }
  addDepend(fn) {
   
    // 添加依赖的方法
    this.reactiveFns.push(fn)
  }
  notify() {
   
    // 执行依赖的方法
    this.reactiveFns.forEach((fn) => {
   
      fn()
    })
  }
}

// let reactiveFns = []

const depend = new Depend()

function watchFn(fn) {
   
  depend.addDepend(fn)
}

let obj = {
   
  name: 'lmw',
}
watchFn(function () {
   
  console.log('----------', obj.name)
})
obj.name = 'wml'
depend.notify()
// reactiveFns.forEach((fn) => {
   
//   fn()
// })

4、自动监听对象属性的变化

每次操作完对象属性的值时都要手动再执行一遍收集的依赖，这样很麻烦，所以我们可以用Proxy来监听这个对象

class Depend {
   
  constructor() {
   
    // 用于存放依赖
    this.reactiveFns = []
  }
  addDepend(fn) {
   
    // 添加依赖的方法
    this.reactiveFns.push(fn)
  }
  notify