1. 響應(yīng)式的相關(guān)知識

Vue 3 中的響應(yīng)式原理是通過使用 ES6 的 Proxy 對象來實(shí)現(xiàn)的。在 Vue 3 中，每個組件都有一個響應(yīng)式代理對象，當(dāng)組件中的數(shù)據(jù)發(fā)生變化時，代理對象會立即響應(yīng)并更新視圖。

具體來說，當(dāng)一個組件被創(chuàng)建時，Vue 會為組件的 data 對象創(chuàng)建一個響應(yīng)式代理對象。這個代理對象可以監(jiān)聽到數(shù)據(jù)的變化，并在數(shù)據(jù)變化時更新視圖。

當(dāng)組件的 data 對象發(fā)生變化時，代理對象會收到變化通知，然后將變化傳遞給相關(guān)的組件和子組件，從而觸發(fā)組件的重新渲染。這種機(jī)制可以有效地保證視圖和數(shù)據(jù)的同步

2. 響應(yīng)式的相關(guān)實(shí)現(xiàn)

我們都知道在vue3中主要是采取的ES6中的Proxy來進(jìn)行數(shù)據(jù)的代理，通過reffect反射來實(shí)現(xiàn)動態(tài)的數(shù)據(jù)響應(yīng)式，Vue3數(shù)據(jù)的更新是proxy配合Reffect來實(shí)現(xiàn)的

通過Proxy（代理）： 攔截對象中任意屬性的變化，屬性值的讀寫，屬性的增加，屬性的刪除等。

通過Reffect（反射）： 對源對象的屬性進(jìn)行操作

其中的Proxy就相當(dāng)于一個攔截器，用來攔截對對象中的修改、添加、刪除任意屬性時，都能被監(jiān)測到，如下代碼。我們通過。

    const person = {
      name:'張三',
      age:18,
      sex:'男'
    }
    const person1 = new Proxy(person,{
      set(target,key,value){ //其中的target是被操作的對象，key是操作對象的key值，value是更新值
        console.log('我正在被修改');
        return target[key]
        // return Reflect.set(target,key,value)
      },
      get(target,key){
        console.log(target,1);
        console.log(key,2);
        console.log('我正在被讀取');
        return target[key]
        // return Reflect.get(target,key)
      }
    })

    person1.age = 19
    person1.sex = '女'
    person1.name = '李四'
    console.log(person1);
    console.log(person);

我們可以看出雖然我們對person1中的相關(guān)屬性進(jìn)行了對應(yīng)的修改，且Proxy所代理的虛擬化對象也監(jiān)測到了我們對這三個屬性的修改，但是也只是單純的監(jiān)測到，沒有進(jìn)行實(shí)質(zhì)上的屬性的響應(yīng)式的處理。因此我們就需要使用reffect映射來完成最后的處理。

3. 什么是reffect

在vue3中通常會將Proxy和reffect兩者配合起來使用，Reflect對象的方法與Proxy對象的方法一一對應(yīng)，只要是Proxy對象的方法，就能在Reflect對象上找到對應(yīng)的方法。這就讓Proxy對象可以方便地調(diào)用對應(yīng)的Reflect方法，完成默認(rèn)行為，作為修改行為的基礎(chǔ)。Proxy可以捕獲13種不同的基本操作，這些操作有各自不同的Reflect API方法。如get、set、has、defineProperty等相關(guān)操作。如下代碼就簡單的完成了一個響應(yīng)式的基本操作。

    const person = {
      name:'張三',
      age:18,
      sex:'男'
    }


    const person1 = new Proxy(person,{
      set(target,key,value){
        console.log('我正在被修改');
        return Reflect.set(target,key,value)
      },
      get(target,key){
        console.log(target,1);
        console.log(key,2);
        console.log('我正在被讀取');
        return Reflect.get(target,key)
      }
    })
    person1.age = 19
    person1.sex = '女'
    person1.name = '李四'
    console.log(person1);
    console.log(person);

4. 總結(jié)

以上就是Vue3中數(shù)據(jù)想響應(yīng)式的原理，在Vue2中，數(shù)據(jù)響應(yīng)式主要借助Object.defineProperty()來實(shí)現(xiàn)，存在的缺陷是無法操作數(shù)據(jù)的增加和刪除，在Vue3中，數(shù)據(jù)響應(yīng)式主要借助proxy和Reffect配合實(shí)現(xiàn)，可以做到實(shí)現(xiàn)數(shù)據(jù)的增刪改查。文章來源地址http://www.zghlxwxcb.cn/news/detail-607671.html