一、Vue 2 回應式原理
Vue.js是一個漸進式的JavaScript框架，它使用了回應式系統來維護應用程式的狀態，回應式系統是Vue.js的核心部分，它使得應用程式能夠自動地更新視圖，當資料發生變化時，
在Vue.js中，回應式系統使用了一種叫做"觀察者模式"的設計模式，當你創建一個 Vue 實體時, Vue 會在內部對data物件進行遍歷，并使用Object.defineProperty()來劫持各個屬性的setter，getter，在資料變化時發布訊息給訂閱者，觸發相應的更新，
當組件中的某個資料被修改時，Vue.js會觸發對應的視圖更新，這種機制可以幫助開發者輕松地維護應用程式的狀態，并自動地更新視圖，
Vue.js 回應式系統主要由以下三部分組成：
-
Observer：觀察者，負責監聽 data 物件中屬性的變化，
-
Watcher：訂閱者，用來收集依賴關系，并在屬性變化時通知觀察者，
-
Dep：依賴收集器，主要用來管理 Watcher，它負責將訂閱者和屬性之間建立關聯，
當組件中使用了回應式資料時，Vue 會將這些資料進行觀察，并在資料發生變化時通知相關的訂閱者，來更新相應的視圖，
Vue.js 在設計時，也做了一些優化，避免了不必要的更新，例如通過記錄哪些組件依賴于哪些資料來控制更新的組件，在 Vue.js 2.x 中，還添加了虛擬 DOM 來優化更新流程，
當使用 Vue.js 開發應用程式時，你可能會遇到一些和回應式系統相關的問題，其中一些常見的問題有：
-
如何更新回應式物件？ Vue.js 會在內部使用Object.defineProperty()來劫持物件的 getter 和 setter，如果你直接修改回應式物件的屬性，Vue 將不會跟蹤到這個變化，因此不會更新視圖，正確的方法是使用 Vue.set(object, key, value) 或者 object[key] = value
-
為什么陣列更新不能觸發視圖更新？ Vue.js 中的陣列是特殊的物件，它們需要特殊的方法來更新，例如：Vue.set(array, index, value) 或者 array.splice(index, 1, value)
-
為什么物件屬性添加不能觸發視圖更新？ Vue.js 不能劫持物件屬性的添加，如果需要添加新的回應式屬性，需要使用Vue.set(object, key, value) 或者 object[key] = value
另外還有一些和回應式系統相關的高級用法:
-
使用 $watch() 和 $set() 方法 Vue 實體提供了 $watch() 和 $set() 方法來手動觀察和修改回應式資料， $watch() 方法可以監聽回應式資料的變化，并在變化時執行回呼函式， $set() 方法可以用來設定回應式資料，并觸發相應的視圖更新
-
使用 computed 和 watch 選項 Vue.js 提供了 computed 和 watch 選項來實作回應式系統，可以使用 computed 選項來定義計算屬性，在回應式資料變化時自動更新，使用 watch 選項來監聽回應式資料的變化，并在變化時執行回呼函式，
-
使用 v-model 指令 v-model 指令是 Vue.js 中的一個很常用的指令，它可以系結表單元素和組件，并在輸入時自動更新回應式資料，
- 使用 $nextTick 方法
????在 Vue 中，資料的更新和 DOM 更新是異步的，所以如果你在修改了資料之后立即操作 DOM 會出現問題， $nextTick 方法可以在資料更新之后，下一次 DOM 更新之前執行回呼函式，這樣可以保證我們操作的 DOM 是最新的，
- 使用 $forceUpdate() 方法
????$forceUpdate 方法可以強制 Vue 組件重新渲染，通常不需要使用這個方法，因為 Vue 的回應式系統會自動處理視圖的更新，但是如果你使用了一些非回應式的資料來更新組件，那么可能需要使用這個方法來手動更新視圖，
Vue.js 的回應式系統是它非常強大的一個功能，它使得我們能夠輕松地維護應用程式的狀態，并自動地更新視圖， Vue 中提供了很多用于管理回應式系統的 API 和選項，在實際專案中應用這些 API 和選項能更好地掌握和管理應用程式的狀態，
二、Vue 3 回應式原理
Vue 3 中的回應式系統與 Vue 2 中有所不同，Vue 3 使用了一種新的回應式系統，稱為 "回應式函式"，
Vue 3 中的回應式函式是一種特殊的 JavaScript 函式，它可以自動檢測其輸入 (依賴) 的變化，并進行重新渲染，在 Vue 3 中，組件的資料將被定義為一組回應式函式，而不是一組回應式物件，
具體來說:
- 首先使用
reactive來創建一個回應式物件，它可以接受一個普通 JavaScript 物件作為引數 - 接著使用
computed來創建計算屬性，它可以自動追蹤依賴并在依賴發生變化時重新計算， - 在模板中使用
ref來創建參考，它可以參考回應式物件中的值 - 在組件內使用
watchEffect來監聽變數變化
Vue 3 中回應式函式是通過 Proxy 和 Reflect 實作的，可以更好地支持嵌套屬性和動態屬性，并且更加高效地進行依賴追蹤， Vue3 中對于物件和陣列都是重新創建一個物件或陣列來實作回應式而非像Vue2一樣在原物件上增加訪問器屬性
Vue 3 中的回應式系統是一組回應式函式，它通過使用 reactive, computed, ref, watchEffect 等 API 來實作，這種回應式系統可以更好地支持嵌套屬性和動態屬性，更加高效地進行依賴追蹤，同時還可以減少代碼復雜性，
在 Vue 3 中,有了這種新的回應式系統，我們可以更簡潔地撰寫組件，并且有更好的控制組件的渲染，由于這種回應式系統是通過函式實作的，所以也可以使用函式式編程的思想，更好地處理組件之間的互動，
作者：yuzhihui出處：http://www.cnblogs.com/yuzhihui/ 宣告：歡迎任何形式的轉載，但請務必注明出處！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541770.html
標籤：其他
上一篇：CSS3 中flex 布局
下一篇：2022關于賞金獵人的一些事