coolliyong.github.io

VUE3.0 响应式机制

核心 API

• Proxy ES6新增，代理器/拦截器，代理/拦截对象的操作

• Reflect ES6新增，操作对象而提供的API

简单模拟响应式代码 JS 版本

function reactivity(data) {
  const headler = {
    // get 时候取值，如果取值是一个复杂类型，则递归一次响应式
    get(target, key, receiver) {
      const val = Reflect.get(target, key, receiver)
      if (typeof val === 'object' && val !== null) {
        return reactivity(val)
      }
      return val
    },
    // set 赋值，赋值的时候更新视图部分
    set(target, key, val, receiver) {
      console.log('更新视图')
      return Reflect.set(target, key, val, receiver)
    },
    // 删除属性的时候触发
    deleteProperty(target, key) {
      Reflect.deleteProperty(target, key)
    }
  }
  // 最后返回响应式数据
  return new Proxy(data, headler)
}