vue2、vue3 区别

底层数据响应原理

vue2   Object.defineProperty() 

vue3   new Proxy()

 const user = {
    name: 'wang',
    age: 18,
    wife: {
      name: 'xiao',
      age: 17
    }
  }

  const proxyUser = new Proxy(user, {
    get (target, property) { // 读取目标对象的某个属性值
      console.log('get方法调用了')
      return Reflect.get(target, property)
    },
    set (target, property, val) { // 修改/添加属性值
      console.log('set方法调用了')
      return Reflect.set(target, property, val)
    },
    deleteProperty(target, property) { // 删除目标对象的某个属性
      console.log('delete方法调用了')
      return Reflect.deleteProperty(target, property)
    }
  })

  // 通过代理对象：
  // 查---获取目标对象中的某个属性值
  console.log(proxyUser.name)
  // 改---更新目标对象中的某个属性值
  proxyUser.name = 'lao wang'
  console.log(user)
  // 增---向目标对象中添加一个新的属性值
  proxyUser.sex = 'male'
  console.log(user)
  // 删---删除目标对象的某个属性值
  delete proxyUser.name
  console.log(user)

打印结果如下：