Vue3数据响应式核心原理

Vue3数据响应式核心原理

$ 定义

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。

Proxy 比Object.defineProperty在语法上更加简单,在性能上更加优越

$ 语法

const p = new Proxy(target, handler)

$ 参数

target:要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler:一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

$模拟代码

// 模拟 Vue 中的 data 选项
let data = {
     
  msg: 'hello',
  count: 0
}

// 模拟 Vue 实例
let vm = new Proxy(data, {
     
  // 执行代理行为的函数
  // 当访问 vm 的成员会执行
  get (target, key) {
     
    console.log('get, key: ', key, target[key])
    return target[key]
  },
  // 当设置 vm 的成员会执行
  set (target, key, newValue) {
     
    console.log('set, key: ', key, newValue)
    if (target[key] === newValue) {
     
      return
    }
    target[key] = newValue
    document.querySelector('#app').textContent = target[key]
  }
})

// 测试
vm.msg = 'Hello World'
console.log(vm.msg)