vue2的响应式

核心:

对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)

数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

//vue2响应式核心代码 略。。。（木空写了o(╥﹏╥)o）
Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

proxy代理对象参考网址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Reflect反射对象参考网址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

vue3 响应式核心

  <script type="text/javascript">
   const user = {
     name:'佐助',
     age:20,
     wife:{
       name:'小樱',
       age:19
     }
   }

   //把目标对象编程代理对象的过程,使用proxy代理对象代理该目标对象，并且使用Reflect反射对象反射出去
   //参数1：user ---> target 目标对象
   //参数2：handler --->处理器对象，内置了许多方法 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy，用来监视数据，及这个数据的操作
  const proxyUser = new Proxy(user,{
    //获取目标对象的某个数据
    get(target, property){
      console.log('get方法调用了吗')
      return Reflect.get(target, property) //通过反射对象将数据反射出去
    },

    //修改或添加目标对象的某个数据
    set(target, property, value){
      console.log('set对象调用了吗')
      return Reflect.set(target, property, value) //调用反射对象将数据反射到目标对象上
    },

    //删除某个目标对象
    deleteProperty(target, property){
      console.log('deleteProperty调用了吗')
      return Reflect.deleteProperty(target, property)
    },
  })


  console.log(proxyUser.name)

  proxyUser.gender = '男'
  console.log('添加后的代理对象是===',proxyUser)

  //删除操作
  delete proxyUser.name
  console.log('删除后的代理对象是===',proxyUser)
  </script>

vue3 使用proxy代理对象和Reflect反射对象组合实现响应式数据