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

【資料圖】

廢話不多說，直接進入正題，響應(yīng)式在日常開發(fā)中的應(yīng)用是很常見的，這里舉個簡單的例子：

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

這時候我們想讓b=4*10，這樣顯然是不行的，即使我們在前面加上個var也只會發(fā)生變量提升，我們所給的值并不會提升。

而這個時候，響應(yīng)式的作用就體現(xiàn)出來了：

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

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

分析一下reactive

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

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

這里我列出尤大在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()        })    }}

我們來分析一下這段代碼：

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

Vue2的Object.defineProperty

事實上，在Vue2時期，響應(yīng)式的都是交給Object.defineProperty來實現(xiàn)的，但在Vue3當(dāng)中切換成了Proxy，我們等下來結(jié)合實際代碼來看原因；我們先來看看Vue2是如何實現(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()            }        })    })    //這時候返回的原始對象已經(jīng)具有響應(yīng)性    return raw}

這樣一個簡單的響應(yīng)式API就實現(xiàn)了

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

這就導(dǎo)致了：

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

Vue3的Proxy

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

讓我們來看看實際代碼是什么樣子的：

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

通過對對象進行收集依賴來實現(xiàn)響應(yīng)式的方式也便是Vue3響應(yīng)式的精髓

ref

在官方文檔有句話：reactive()的種種限制歸根結(jié)底是因為 JavaScript 沒有可以作用于所有值類型的 “引用” 機制，而reactive的限制便是：

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

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

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

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

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