本篇文章帶大家學習Vue，深入了解Vue中響應式原理，希望對大家有所幫助！
【資料圖】
廢話不多說，直接進入正題，響應式在日常開發中的應用是很常見的，這里舉個簡單的例子：
let a=3let b=a*10console.log(b)//30a=4console.log(b)//40
這時候我們想讓b=4*10，這樣顯然是不行的，即使我們在前面加上個var也只會發生變量提升，我們所給的值并不會提升。
而這個時候，響應式的作用就體現出來了：
import { reactive } from "vue"let state = reactive({ a: 3 })let b = computed(() => state.a * 10)console.log(b.value) // 30state.a = 4console.log(b.value) // 40只需要一個簡單的響應式API便可實現跟蹤變化的效果。【相關推薦：vuejs視頻教程、web前端開發】
事實上，Vue3的reactive的本質上就是一個發布訂閱模式
通過創建依賴圖來跟蹤數據的依賴關系。依賴圖是一個圖形，它描述了哪些數據是依賴于哪些數據的。當數據發生變化時，Vue 3 的 reactive系統會自動觸發視圖的更新。這是因為它在依賴圖中跟蹤了數據變化，并通過將其與視圖的更新關聯起來來實現的
這里我列出尤大在Vue Master里演示的代碼做個簡單的示例：
class Dep{ constructor(value){ this.subscribers=new Set() this._value=value } get value(){ this.depend() return this._value } set value(newValue){ this._value=newValue this.notify() } depend(){ if(activeEffect){ this.subscribers.add(activeEffect) } } notify(){ this.subscribers.forEach(effect=>{ effect() }) }}我們來分析一下這段代碼：
定義一個subscribe屬性，作為一個訂閱者列表，用來存儲所有的訂閱者信息depend函數用來管理依賴關系，即該訂閱者所依賴的該變量notify函數便是作為通知所有訂閱者該變量的值已經發生變化當變量的值發生變化的時候，它便可以自動的通知所有的訂閱者進行更新了
事實上，在Vue2時期，響應式的都是交給Object.defineProperty來實現的，但在Vue3當中切換成了Proxy，我們等下來結合實際代碼來看原因；我們先來看看Vue2是如何實現的：
function reactive(raw){ Object.keys(raw).forEach(ket=>{ const dep=new Dep() let value=raw[key] Object.definProperty(raw,key,{ get(){ dep.depend() return value }, //當屬性發生 set(newValue){ value=newValue dep.notify() } }) }) //這時候返回的原始對象已經具有響應性 return raw}這樣一個簡單的響應式API就實現了
但這里缺點也就很明顯了：在 Vue 2.x 中，被傳入的對象會直接被 Vue.observable變更而在Vue3當中，則是會返回一個可響應的代理，而對源對象直接進行變更仍然是不可響應的
這就導致了：
當我們添加或者刪除對象的屬性時，Vue2的響應式是無法檢測的，由于 Vue 會在初始化實例時對 property 執行 getter/setter 轉化，所以 property 必須在 data對象上存在才能讓 Vue 將它轉換為響應式的無法檢測數組的下標和長度的變化當然，這個屬于歷史局限了，當時ES5也就只能選擇Object.definProperty，但在了ES6版本，便多了Proxy，這時候Vue的響應式便得到了升級
Vue3采用Proxy來監控數據的變化，相較于Vue2來說，不僅解決了上述的問題，還有這些優勢：
vue.$set來觸發響應式，這讓代碼看上去能過更加簡介全方位的數組變化檢測，消除Vue2中無效邊界情況減少了Vue3中書寫響應式的代碼量，這讓我們的開發更加方便讓我們來看看實際代碼是什么樣子的：
const reactiveHandles={ get(target,key,receiver){ const dep=getDep(target,key) dep.depend() return Reflect.get(target,key,receiver) }, set(target,key,value,receiver){ const dep=getDep(target,key) const result=Reflect.set(target,key,value,receiver) dep.notify() return result }}通過對對象進行收集依賴來實現響應式的方式也便是Vue3響應式的精髓
在官方文檔有句話：reactive()的種種限制歸根結底是因為 JavaScript 沒有可以作用于所有值類型的 “引用” 機制，而reactive的限制便是：
而這個時候就需要ref來登場了，ref便是針對基本數據類型而誕生的，彌補了reactive的缺陷，簡單的來說，ref更加適合簡單的單個可變值(不過實際開發大多數時候都是ref一把梭哈哈哈
這里順便提一下，響應式語法糖的提案被取消了還是蠻可惜的
（學習視頻分享：vuejs入門教程、編程基礎視頻）
以上就是一文詳解Vue中響應式原理的詳細內容，更多請關注php中文網其它相關文章！
營業執照公示信息