vue2的響應(yīng)式

核心:

對(duì)象: 通過(guò)defineProperty對(duì)對(duì)象的已有屬性值的讀取和修改進(jìn)行劫持(監(jiān)視/攔截)

數(shù)組: 通過(guò)重寫(xiě)數(shù)組更新數(shù)組一系列更新元素的方法來(lái)實(shí)現(xiàn)元素修改的劫持

//vue2響應(yīng)式核心代碼 略。。。（木空寫(xiě)了o(╥﹏╥)o）
Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

proxy代理對(duì)象參考網(wǎng)址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Reflect反射對(duì)象參考網(wǎng)址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

vue3 響應(yīng)式核心

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

   //把目標(biāo)對(duì)象編程代理對(duì)象的過(guò)程,使用proxy代理對(duì)象代理該目標(biāo)對(duì)象，并且使用Reflect反射對(duì)象反射出去
   //參數(shù)1：user ---> target 目標(biāo)對(duì)象
   //參數(shù)2：handler --->處理器對(duì)象，內(nèi)置了許多方法 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy，用來(lái)監(jiān)視數(shù)據(jù)，及這個(gè)數(shù)據(jù)的操作
  const proxyUser = new Proxy(user,{
    //獲取目標(biāo)對(duì)象的某個(gè)數(shù)據(jù)
    get(target, property){
      console.log('get方法調(diào)用了嗎')
      return Reflect.get(target, property) //通過(guò)反射對(duì)象將數(shù)據(jù)反射出去
    },

    //修改或添加目標(biāo)對(duì)象的某個(gè)數(shù)據(jù)
    set(target, property, value){
      console.log('set對(duì)象調(diào)用了嗎')
      return Reflect.set(target, property, value) //調(diào)用反射對(duì)象將數(shù)據(jù)反射到目標(biāo)對(duì)象上
    },

    //刪除某個(gè)目標(biāo)對(duì)象
    deleteProperty(target, property){
      console.log('deleteProperty調(diào)用了嗎')
      return Reflect.deleteProperty(target, property)
    },
  })


  console.log(proxyUser.name)

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

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

vue3 使用proxy代理對(duì)象和Reflect反射對(duì)象組合實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)