本篇文章帶大家學(xué)習(xí)Vue，深入了解Vue中響應(yīng)式原理，希望對(duì)大家有所幫助！

【資料圖】

廢話不多說(shuō)，直接進(jìn)入正題，響應(yīng)式在日常開(kāi)發(fā)中的應(yīng)用是很常見(jiàn)的，這里舉個(gè)簡(jiǎn)單的例子：

let a=3let b=a*10console.log(b)//30a=4console.log(b)//40

這時(shí)候我們想讓b=4*10，這樣顯然是不行的，即使我們?cè)谇懊婕由蟼€(gè)var也只會(huì)發(fā)生變量提升，我們所給的值并不會(huì)提升。

而這個(gè)時(shí)候，響應(yīng)式的作用就體現(xiàn)出來(lái)了：

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

只需要一個(gè)簡(jiǎn)單的響應(yīng)式API便可實(shí)現(xiàn)跟蹤變化的效果?！鞠嚓P(guān)推薦：vuejs視頻教程、web前端開(kāi)發(fā)】

分析一下reactive

事實(shí)上，Vue3的reactive的本質(zhì)上就是一個(gè)發(fā)布訂閱模式

通過(guò)創(chuàng)建依賴圖來(lái)跟蹤數(shù)據(jù)的依賴關(guān)系。依賴圖是一個(gè)圖形，它描述了哪些數(shù)據(jù)是依賴于哪些數(shù)據(jù)的。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue 3 的 reactive系統(tǒng)會(huì)自動(dòng)觸發(fā)視圖的更新。這是因?yàn)樗谝蕾噲D中跟蹤了數(shù)據(jù)變化，并通過(guò)將其與視圖的更新關(guān)聯(lián)起來(lái)來(lái)實(shí)現(xiàn)的

這里我列出尤大在Vue Master里演示的代碼做個(gè)簡(jiǎn)單的示例：

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

我們來(lái)分析一下這段代碼：

當(dāng)變量的值發(fā)生變化的時(shí)候，它便可以自動(dòng)的通知所有的訂閱者進(jìn)行更新了

Vue2的Object.defineProperty

事實(shí)上，在Vue2時(shí)期，響應(yīng)式的都是交給Object.defineProperty來(lái)實(shí)現(xiàn)的，但在Vue3當(dāng)中切換成了Proxy，我們等下來(lái)結(jié)合實(shí)際代碼來(lái)看原因；我們先來(lái)看看Vue2是如何實(shí)現(xiàn)的：

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            },            //當(dāng)屬性發(fā)生            set(newValue){                value=newValue                dep.notify()            }        })    })    //這時(shí)候返回的原始對(duì)象已經(jīng)具有響應(yīng)性    return raw}

這樣一個(gè)簡(jiǎn)單的響應(yīng)式API就實(shí)現(xiàn)了

但這里缺點(diǎn)也就很明顯了：在 Vue 2.x 中，被傳入的對(duì)象會(huì)直接被 Vue.observable變更而在Vue3當(dāng)中，則是會(huì)返回一個(gè)可響應(yīng)的代理，而對(duì)源對(duì)象直接進(jìn)行變更仍然是不可響應(yīng)的

這就導(dǎo)致了：

當(dāng)然，這個(gè)屬于歷史局限了，當(dāng)時(shí)ES5也就只能選擇Object.definProperty，但在了ES6版本，便多了Proxy，這時(shí)候Vue的響應(yīng)式便得到了升級(jí)

Vue3的Proxy

Vue3采用Proxy來(lái)監(jiān)控?cái)?shù)據(jù)的變化，相較于Vue2來(lái)說(shuō)，不僅解決了上述的問(wèn)題，還有這些優(yōu)勢(shì)：

讓我們來(lái)看看實(shí)際代碼是什么樣子的：

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

通過(guò)對(duì)對(duì)象進(jìn)行收集依賴來(lái)實(shí)現(xiàn)響應(yīng)式的方式也便是Vue3響應(yīng)式的精髓

ref

在官方文檔有句話：reactive()的種種限制歸根結(jié)底是因?yàn)?JavaScript 沒(méi)有可以作用于所有值類(lèi)型的 “引用” 機(jī)制，而reactive的限制便是：

而這個(gè)時(shí)候就需要ref來(lái)登場(chǎng)了，ref便是針對(duì)基本數(shù)據(jù)類(lèi)型而誕生的，彌補(bǔ)了reactive的缺陷，簡(jiǎn)單的來(lái)說(shuō)，ref更加適合簡(jiǎn)單的單個(gè)可變值(不過(guò)實(shí)際開(kāi)發(fā)大多數(shù)時(shí)候都是ref一把梭哈哈哈

這里順便提一下，響應(yīng)式語(yǔ)法糖的提案被取消了還是蠻可惜的

（學(xué)習(xí)視頻分享：vuejs入門(mén)教程、編程基礎(chǔ)視頻）

以上就是一文詳解Vue中響應(yīng)式原理的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞： Vue.js 設(shè)計(jì)模式