首頁  >  文章  >  web前端  >  一文詳解Vue中響應式原理

一文詳解Vue中響應式原理

青灯夜游
青灯夜游轉載
2023-02-13 19:30:591626瀏覽

這篇文章帶大家學習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便可實現追蹤變化的效果。 【相關推薦:vuejs影片教學web前端開發

#分析一下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一把梭哈哈哈這裡順便提一下,響應式語法糖的提案被取消了還蠻可惜的

(學習影片分享:vuejs入門教學程式設計基礎影片

以上是一文詳解Vue中響應式原理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除