vue3数据劫持

• vue3放弃了时使用object.defineProperty,开始使用Proxy Proxy 是在 ES6 中引入的，它使 Vue 3 避免了 Vue 早期版本中存在的一些响应性问题，Proxy像是在目标对象前面架设了一层拦截,外界访问该对象必须先通过这层拦截,

// 定义一个Proxy处理器对象
const reactiveHandler = {
  get(target, prop) {
    console.log('进行的数据读取操作', prop)
    const result = Reflect.get(target, prop)
    return result
  },
  set(target, prop, value) {
    console.log('进行了修改数据的操作', prop, value)
    const result = Reflect.set(target, prop, value)
    return result
  },
  deleteProperty(target, prop) {
    console.log('进行了数据删除操作', prop)
    const result = Reflect.deleteProperty(target, prop)
    return result
  },
}

• 定义一个浅度监听的函数 shallowReactive

function shallowReactive(target) {
  // 如果传入的target 存在 且是一个对象是执行
  if (target && typeof target === 'object') {
    return new Proxy(target, reactiveHandler)
  }
  // 否则
  return target
}

• 定义一个深度监听的函数 reactive

function reactive(target) {
  // 与浅监视不同的是 深度监视需要判断传入的数据类型为数组还是对象 并进行递归遍历劫持
  if (target instanceof Array) {
    target.forEach((item, index) => {
      // 遍历每项 并递归
      target[index] = reactive(item)
    })
  } else {
    // 遍历对象 并对对象的每个属性属性值进行递归遍历
    Object.keys(target).forEach((key) => {
      target[key] = reactive(target[key])
    })
  }
  // 如果传入的target 存在 且是一个对象是执行
  if (target && typeof target === 'object') {
    return new Proxy(target, reactiveHandler)
  }
  // 否则
  return target
}

以上便是创建对象形式的响应式数据的两个函数。