Vue3实现响应式原理剖析

2023-10-18 12:37:49

Vue3的响应式系统中，Proxy相比于Object.property可以直接监听对象数组，对于深层次的对象和数组，会把触发对应getter，然后去递归进行依赖收集。

一、Proxy原理

Proxy是JavaScript中的一种对象包装器，它可以拦截对象的属性访问、设置和函数调用，并允许我们对这些操作进行自定义处理。

const obj = {
  name: 'Tom'
}

const proxy = new Proxy(obj, {
  get: function(target, property) {
    console.log(`Getting property ${property} from target ${target}`)
    return target[property]
  },
  set: function(target, property, value) {
    console.log(`Setting property ${property} on target ${target} to value ${value}`)
    target[property] = value
  }
})

proxy.name // Getting property name from target [object Object]
// "Tom"

proxy.name = 'Bob' // Setting property name on target [object Object] to value Bob

二、Vue3响应式原理

Vue3的响应式系统是基于Proxy实现的。Vue3通过Proxy拦截对象的属性访问、设置和函数调用，然后对这些操作进行自定义处理，从而实现响应式。

Vue3在初始化一个响应式对象时，会创建一个Proxy对象，并把这个Proxy对象作为这个响应式对象的代理。当对这个响应式对象进行属性访问、设置和函数调用时，实际上是对这个Proxy对象进行这些操作。Proxy对象会拦截这些操作，并根据这些操作进行相应的处理，从而实现响应式。

const obj = {
  name: 'Tom'
}

const proxy = new Vue3.reactive(obj)

proxy.name // Getting property name from target [object Object]
// "Tom"

proxy.name = 'Bob' // Setting property name on target [object Object] to value Bob