這篇文章帶大家學習Vue，深入了解Vue中響應式原理，希望對大家有幫助！
以此文紀念將要逝去的響應式語法糖
廢話不多說，直接進入正題，響應式在日常開發中的應用是很常見的，這裡舉個簡單的例子：
let a=3 let b=a*10 console.log(b)//30 a=4 console.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) // 30
state.a = 4
console.log(b.value) // 40只需要一個簡單的響應式API便可實現追蹤變化的效果。 【相關推薦：vuejs影片教學、web前端開發】
reactive的本質上就是一個發布訂閱模式
reactive 系統會自動觸發視圖的更新。這是因為它在依賴圖中追蹤了資料變化，並透過將其與視圖的更新關聯起來來實現的
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
函數便是作為通知所有訂閱者該變數的值已經改變
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
}但這裡缺點也就很明顯了：
在Vue 2.x 中，被傳入的物件會直接被Vue.observable 變更 而在Vue3當中，則是會回傳一個可回應的代理，而對來源物件直接進行變更仍然是不可回應的
##當當我們Object.definProperty新增或刪除
當然，這個屬於歷史限制了，當時ES5也就只能選擇- 物件的屬性時，Vue2的回應式是無法偵測的，由於Vue 會在初始化實例時對property 執行getter/setter 轉化，所以property 必須在
陣列data物件上存在才能讓Vue 將它轉換為響應式的無法偵測- 的下標和長度的變化
，但在了ES6版本，便多了Proxy，這時候Vue的回應式便得到了升級
來監控資料的變化，相較於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響應式的精髓
ref 的種種限制歸根結底是因為JavaScript 沒有可以作用於所有值類型的「引用」 機制，而reactive的限制便是：
#只能處理可被觀測的資料結構，如陣列和物件；而不可觀測的資料結構，如原始資料型別就無法被其監控來登場了，ref便是針對ref
- 只能處理定義在它所在元件的數據，不能處理全域變數
- ##而這個時候就需要
基本資料型別而誕生的，彌補了reactive的缺陷，簡單的來說，ref更適合簡單的單一可變值(不過實際開發大多時候都是ref一把梭哈哈哈這裡順便提一下，響應式語法糖的提案被取消了還蠻可惜的
以上是一文詳解Vue中響應式原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
