一文詳解Vue中響應式原理

本篇文章帶大家學習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便可實現跟蹤變化的效果。【相關推薦：、】

分析一下reactive

事實上，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

事實上，在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

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響應式的精髓

ref

在官方檔案有句話：reactive() 的種種限制歸根結底是因為 JavaScript 沒有可以作用於所有值型別的「參照」機制，而reactive的限制便是：

只能處理可被觀測的資料結構，如陣列和物件；而不可觀測的資料結構，如原始資料型別就無法被其監測
只能處理定義在它所在元件的資料，不能處理全域性變數

而這個時候就需要ref來登場了，ref便是針對基本資料型別而誕生的，彌補了reactive的缺陷，簡單的來說，ref更加適合簡單的單個可變值(不過實際開發大多數時候都是ref一把梭哈哈哈

這裡順便提一下，響應式語法糖的提案被取消了還是蠻可惜的

（學習視訊分享：、）

以上就是一文詳解Vue中響應式原理的詳細內容，更多請關注TW511.COM其它相關文章！