本文已参与「新人创作礼」活动，一起开启掘金创作之路。 最近在学习VUE3，发现vue3的响应式原理和uve2不太一样，所以想要记录一下学习的心得

一、vue2响应式原理——数据劫持(Object.defineProperty())

let person = {
  name: '张三'
}
let p = {}
Object.defineProperty(p, 'name', {
  // get函数，监测数据读取
  get() {
    return person.name
  },
  // set函数，监测数据更改
  set(value) {
    person.name = value
  }
})

二、vue2响应式的缺点

## 1、无法直接监测到对象的删除属性和添加属性
## 2、无法直接监测到对数组索引的操作

三、vue3响应式原理

## 1、基本类型的响应式
    vue3对基本类型的响应式和vue2是一样的，都是使用的数据劫持
## 2、 对象类型的响应式
    vue3对对象类型的响应式是通过Proxy()和Reflect实现的
     let person = {
        name: '张三',
        age: 18,
     }
    let p = new Proxy(person, {
      get(target,propName) {
       return Reflect.get(target,propName)
     },
     set(target,propName,value) {
      Reflect.set(target,propName,value)
     },
     deleteProperty(target,propName){
      return Reflect.deleteProperty(target,propName)
     }
   })