Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.
 
  
  
  
  Add "age" property 
  
  
  
  
Here are my favorite activities:
 
  
  
  
  
   
  
  
     
  
  
  
      {{ item }} 
  
  
  
      Edit 
  
  
  
    
   
  
  
  
 
  
  
  
  Clear the activities list 
  
  
  

 
 
 
  
  
  
el: '#app', 
  
  
  
  data: { 
  
  
  
    person: { 
  
  
  
      name: "David" 
  
  
  
    }, 
  
  
  
    activities: [ 
  
  
  
      "Reading books", 
  
  
  
      "Listening music", 
  
  
  
      "Watching TV" 
  
  
  
    ] 
  
  
  
  }, 
  
  
  
  methods: {  
  
  
  
    // 1. Add a new property to an object 
  
  
  
    addAgeProperty() { 
  
  
  
      this.person.age = 30 
  
  
  
    }, 
  
  
  
    // 2. Setting an array item by index 
  
  
  
    editActivity(index) { 
  
  
  
      const newValue = prompt('Input a new value') 
  
  
  
      if (newValue) { 
  
  
  
        this.activities[index] = newValue 
  
  
  
      } 
  
  
  
    }, 
  
  
  
    // 3. Modifying the length of the array 
  
  
  
    clearActivities() {  
  
  
  
      this.activities.length = 0  
  
  
  
    } 
  
  
  
  } 
  
  
  
}); 
 
 

在上面的示例中，我們會發(fā)現(xiàn)這三種方法都不起作用。我們不能向該person對象添加新屬性，無法使用activities的索引來編輯數(shù)組中的項目，也不能修改activities數(shù)組的長度。

優(yōu)化如下：

 
 
 
  
  
  
el: '#app', 
  
  
  
  data: { 
  
  
  
    person: { 
  
  
  
      name: "David" 
  
  
  
    }, 
  
  
  
    activities: [ 
  
  
  
      "Reading books", 
  
  
  
      "Listening music", 
  
  
  
      "Watching TV" 
  
  
  
    ] 
  
  
  
  }, 
  
  
  
  methods: {  
  
  
  
    // 1. Adding a new property to the object 
  
  
  
    addAgeProperty() { 
  
  
  
      Vue.set(this.person, 'age', 30) 
  
  
  
    }, 
  
  
  
    // 2. Setting an array item by index 
  
  
  
    editActivity(index) { 
  
  
  
      const newValue = prompt('Input a new value') 
  
  
  
      if (newValue) { 
  
  
  
        Vue.set(this.activities, index, newValue) 
  
  
  
      } 
  
  
  
    }, 
  
  
  
    // 3. Modifying the length of the array 
  
  
  
    clearActivities() {  
  
  
  
      this.activities.splice(0) 
  
  
  
    } 
  
  
  
  } 
  
  
  
}); 
 
 

在此示例中，我們用Vue.setAPI方法將新age屬性添加到person對象，并從活動數(shù)組中選擇/修改特定項目。在最后一種情況下，使用JavaScript內(nèi)置splice方法。

這個做法完全可行但卻略顯笨拙，而且會導(dǎo)致前后代碼不一致。而Vue 3就解決了這個問題。

我們用下面示例繼續(xù)看：

 
 
 
  
  
  
data() { 
  
  
  
    return { 
  
  
  
      person: { 
  
  
  
        name: "David" 
  
  
  
      }, 
  
  
  
      activities: [ 
  
  
  
        "Reading books", 
  
  
  
        "Listening music", 
  
  
  
        "Watching TV" 
  
  
  
      ] 
  
  
  
    } 
  
  
  
  }, 
  
  
  
  methods: {  
  
  
  
    // 1. Adding a new property to the object 
  
  
  
    addAgeProperty() { 
  
  
  
      this.person.age = 30 
  
  
  
    }, 
  
  
  
    // 2. Setting an array item by index 
  
  
  
    editActivity(index) { 
  
  
  
      const newValue = prompt('Input a new value') 
  
  
  
      if (newValue) { 
  
  
  
        this.activities[index] = newValue 
  
  
  
      } 
  
  
  
    }, 
  
  
  
    // 3. Modifying the length of the array 
  
  
  
    clearActivities() {  
  
  
  
      this.activities.length = 0  
  
  
  
    } 
  
  
  
  } 
  
  
  
} 
  
  
  
 
  
  
  
Vue.createApp(App).mount('#app') 
 
 

可以看到在Vue 3中，所有方法都可以正常工作。

在Vue 2.6中，引入的Vue.observable API方法，一定程度的公開了響應(yīng)式系統(tǒng)，使開發(fā)人員可以體驗到響應(yīng)式系統(tǒng)的內(nèi)容。實際上，這和Vue內(nèi)部用來包裝data對象是完全相同的方法，對于在簡單場景創(chuàng)建小的跨組件狀態(tài)存儲很有用。但依舊沒辦法和Vue3的響應(yīng)式系統(tǒng)相比，接下來就為大家詳細(xì)介紹。

注意：由于Object.defineProperty方法是僅限ES5且不可調(diào)整的功能，因此Vue 2不支持IE8及以下版本。

Vue 3響應(yīng)式系統(tǒng)如何工作

為了充分利用ES6 Proxy and Reflect API ，Vue 3中的響應(yīng)式系統(tǒng)已被完全重寫。新版本新增響應(yīng)式API，該API使系統(tǒng)比以前更加靈活和強(qiáng)大。

Proxy API允許開發(fā)人員攔截和修改目標(biāo)對象上的更低級對象操作。代理（proxy）是對象的克隆/包裝（clone/wrapper），并提供特殊功能（稱為target），這些功能響應(yīng)特定的操作并覆蓋JavaScript對象的內(nèi)置行為（稱為traps）。如果仍然需要使用默認(rèn)行為，則可以使用相應(yīng)的Reflection API，其名稱顧名思義就是反映Proxy API的方法。這里有一個示例，用來了解如何在Vue 3中使用這些API：

 
 
 
  
  
  
name: "David", 
  
  
  
  age: 27 
  
  
  
}; 
  
  
  
 
  
  
  
const handler = { 
  
  
  
  get(target, property, receiver) { 
  
  
  
    // track(target, property) 
  
  
  
    console.log(property) // output: name 
  
  
  
    return Reflect.get(target, property, receiver) 
  
  
  
  }, 
  
  
  
  set(target, property, value, receiver) { 
  
  
  
    // trigger(target, property) 
  
  
  
    console.log(`${property}: ${value}`) // output: "age: 30" and "hobby: Programming" 
  
  
  
    return Reflect.set(target, property, value, receiver) 
  
  
  
  } 
  
  
  
} 
  
  
  
 
  
  
  
let proxy = new Proxy(person, handler);    
  
  
  
 
  
  
  
console.log(person) 
  
  
  
 
  
  
  
// get (reading a property value) 
  
  
  
console.log(proxy.name)  // output: David 
  
  
  
 
  
  
  
// set (writing to a property) 
  
  
  
proxy.age = 30; 
  
  
  
 
  
  
  
// set (creating a new property) 
  
  
  
proxy.hobby = "Programming"; 
  
  
  
 
  
  
  
console.log(person) 
 
 

要創(chuàng)建一個新的代理，使用new Proxy(target, handler)構(gòu)造函數(shù)。它帶有兩個參數(shù)：目標(biāo)對象（person對象）和處理程序?qū)ο?，該對象定義將攔截哪些操作（get和set操作）。在handler對象中， get和set陷阱來跟蹤何時讀取屬性以及何時修改/添加屬性。設(shè)置控制臺語句以確保運行正確。

在get和set陷阱采用下列參數(shù)：

• target：代理包裝的目標(biāo)對象
• property：屬性名稱
• value：屬性值（此參數(shù)僅用于設(shè)置操作）
• receiver：進(jìn)行操作的對象（通常是代理）
• Reflect API方法與其相應(yīng)的代理方法接受相同的參數(shù)

注釋中track函數(shù)和trigger函數(shù)特定用于Vue，用于跟蹤何時讀取屬性以及何時修改/添加屬性。

在示例的最后一部分，用控制臺語句輸出原始person對象。然后用另一份聲明中讀取屬性name的proxy對象。接下來，修改age屬性并創(chuàng)建一個新hobby屬性。最后，再次輸出該對象以查看它是否正確更新。

以上就是Vue3響應(yīng)式系統(tǒng)的完整工作流程，但在實際工作中會復(fù)雜得多。

使用Vue 3響應(yīng)式系統(tǒng)，還有一些注意事項：

• 僅適用于支持ES6 +的瀏覽器
• 響應(yīng)代理不等于原始對象

總結(jié)

以上我們將Vue2和Vue3中響應(yīng)式系統(tǒng)部分進(jìn)行了比較，并對響應(yīng)式系統(tǒng)的工作原理進(jìn)行了說明，在后面的文章中，我們會進(jìn)一步為大家介紹Vue3中響應(yīng)式系統(tǒng)的API，敬請期待。