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