[[400474]]

響應式系統（Reactivity systems）是現代前端框架的關鍵部分之一。應用系統的的高度交互性、動態性和響應能力全靠它支持。每個Web開發人員而言都應該了解這一系統的功能和實踐操作。

原理

響應系統是一種使自動使數據源（模型）與數據表示（視圖）層自動保持同步的機制。每次模型更改時，都會重新渲染視圖。

以一個簡單的Markdown編輯器為例。通常編輯器有兩個窗格：一個窗格用于編寫Markdown代碼（用于修改基礎模型），另一個窗格用于預覽已編譯的HTML（顯示已更新的視圖）。當我們在書寫窗格中寫東西時，它會立即在預覽窗格中自動預覽。這個例子比較簡單，在實際情況中會復雜很多。

在許多情況下，我們要顯示的數據取決于其他數據。在這種情況下，需要跟蹤相關數據，并根據跟蹤情況來更新數據。例如，我們有一個fullName，該屬性由firstName和lastName屬性組成。修改其任何依賴項后，fullName將自動重新評估，并在視圖中顯示結果。

了解什么是響應式系統后，在了解Vue 3中的響應系統如何工作以及如何在實踐中使用之前，讓我們一起來快速回顧一下Vue 2中的響應系統內容及其注意事項。

Vue 2的響應式系統簡介

Vue 2中的響應或多或少會被“隱藏”。無論我們放置在data對象中的是什么，Vue都會使其隱式反應（reactive implicitly）。這樣雖然可以使開發人員的工作更加輕松，但靈活度卻會不可避免的降低。

在幕后，Vue 2使用ES5 Object.defineProperty將data對象的所有屬性轉換為getter和setter。對于每個組件實例，Vue創建一個依賴關系觀察程序實例，觀察者會記錄組件渲染期間依賴收集/跟蹤的任何屬性。當屬性觸發依賴項的設置器時，將通知觀察者，并將組件重新渲染并更新視圖。但是卻也會有一些問題存在。

變更檢測警告

由于Object.defineProperty方法的限制，Vue無法檢測到某些數據更改。包括：

• 給對象添加屬性或把對象移除屬性（例如obj.newKey = value）
• 按索引設置數組項（例如arr[index] = newValue）
• 修改數組的長度（例如arr.length = newLength）
  不過為了解決這些問題， Vue為提供了Vue.set API方法，該方法向響應對象添加了一個屬性，確保新屬性也是響應性的，從而觸發了視圖更新。

用下述實例討論該情況：

  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1> 
  <button @click="addAgeProperty">Add "age" property</button> 
  <p>Here are my favorite activities:</p> 
  <ul> 
    <li v-for="item, index in activities" :key="index"> 
      {{ item }} 
      <button @click="editActivity(index)">Edit</button> 
    </li> 
  </ul> 
  <button @click="clearActivities">Clear the activities list</button> 
</div> 

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  
    } 
  } 
}); 

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

優化如下：

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對象，并從活動數組中選擇/修改特定項目。在最后一種情況下，使用JavaScript內置splice方法。

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

我們用下面示例繼續看：

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方法，一定程度的公開了響應式系統，使開發人員可以體驗到響應式系統的內容。實際上，這和Vue內部用來包裝data對象是完全相同的方法，對于在簡單場景創建小的跨組件狀態存儲很有用。但依舊沒辦法和Vue3的響應式系統相比，接下來就為大家詳細介紹。

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

Vue 3響應式系統如何工作

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

Proxy API允許開發人員攔截和修改目標對象上的更低級對象操作。代理（proxy）是對象的克隆/包裝（clone/wrapper），并提供特殊功能（稱為target），這些功能響應特定的操作并覆蓋JavaScript對象的內置行為（稱為traps）。如果仍然需要使用默認行為，則可以使用相應的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) 

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

在get和set陷阱采用下列參數：

• target：代理包裝的目標對象
• property：屬性名稱
• value：屬性值（此參數僅用于設置操作）
• receiver：進行操作的對象（通常是代理）
• Reflect API方法與其相應的代理方法接受相同的參數

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

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

以上就是Vue3響應式系統的完整工作流程，但在實際工作中會復雜得多。

使用Vue 3響應式系統，還有一些注意事項：

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

總結

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