Vue3.0 响应式原理

最新推荐文章于 2022-12-31 08:00:37 发布

userDengDeng

最新推荐文章于 2022-12-31 08:00:37 发布

阅读量174

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/userDengDeng/article/details/114699208

版权

Vue3.0的响应式系统通过Proxy对象进行了重大升级，能够监听动态新增和删除的属性以及数组变化。核心函数包括reactive、ref、toRefs和computed，以及effect、track和trigger用于收集依赖和更新。在Proxy中，set和deleteProperty需要返回布尔值，且涉及receiver的概念。ref适于将基本类型转换为响应式，而reactive返回的对象在某些情况下会丢失响应式，toRefs则帮助解构reactive对象并保持响应式。

摘要由CSDN通过智能技术生成

vue 3.0 响应式系统的升级

使用Proxy对象重写响应式系统

可以监听动态新增的属性
可以监听删除的属性
可以监听数组的索引和length属性

响应式核心函数

reactive/ref/toRefs/computed
effect
track 手机依赖
trigger 更新依赖

Proxy 对象中的两个小问题

第一个问题： set 和 deleteProperty 需要返回布尔类型的值

第二个问题：Proxy 和 Reflect 使用 receiver

Proxy 中的 receiver： Proxy 或者继承 Proxy 的对象

Reflect 中的receiver：如果 target对象设置了getter，getter中的this指向 receiver

const obj = {
   
	get foo() {
   
		console.log(this)
		return this.bar
	}
}

const proxy = new Proxy(obj, {
   
	get (target, key, receiver) {
   
		if (key === 'bar') {
   
			console.log('value - bar')
		}
		return Reflect.get