vue3學習二 深入理解響應性基礎)

2022-09-23 14:00:10 字數 2814 閱讀 4777

vue是如何知道哪些**在執行的?

vue 通過乙個***(effect) 來跟蹤當前正在執行的函式。***是乙個函式的包裹器,在函式被呼叫之前就啟動跟蹤。vue知道哪個***在何時執行,並能再次執行它

let name = 'alice' , age = 20 

let myselfinfo = `$今年$歲了`

console.log(myselfinfo) // alice今年20歲了

age = 30 // 我們預期接下來輸出的是:alice今年30歲了;

console.log(myselfinfo) // alice今年20歲了;

如果我們想要讓第二次輸出的myselfinfo中的age發生變化,就需要再次執行一下拼接的myselfinfo

let name = 'alice' , age = 20 

let myselfinfo = `$今年$歲了`

console.log(myselfinfo) // alice今年20歲了

age = 30

myselfinfo = `$今年$歲了`

console.log(myselfinfo) // alice今年30歲了

effect

在vue2 中,通過***effect來追蹤當前正常執行的函式。接下來對上述**進行改進;

案例1

let name = 'alice' , age = 20 

let myselfinfo = ''

const effectinfo = () => myselfinfo = `$今年$歲了`

effectinfo()

console.log(myselfinfo) // alice今年20歲了

age = 30

effectinfo()

console.log(myselfinfo) // alice今年30歲了

案例1的這個例子,每次更新了age,都要執行一下effect的方法;在vue3中是設定了乙個執行***的棧,然後當***被呼叫時,在呼叫effectinfo這個函式之前,會將自身推到乙個陣列中,這個陣列可以用來檢查當前正在執行的***

// 維持乙個執行***的棧

const runningeffects =

const createeffect = fn =>

// 立即自動執行***

effect()

}

vue如何追蹤變化
vue3 中使用了 proxy,將物件包裹在乙個帶有getset處理程式的proxy中。

proxy是es6的新特性,該部落格也有對該api的介紹,大家可以簡單看一下。proxy的理解和proxy的應用場景。

在使用proxy的乙個難點是this的問題。我們希望任何方法都繫結在proxy,而不是目標物件。這樣我們就可以攔截他們。在es6中有乙個新特性reflect,它允許我們一最小的代價消除這個問題

const dinner = 

const handler =

}const proxy = new proxy(dinner, handler)

使用proxy實現響應性的第一步就是跟蹤乙個屬性何時被讀取,在track的處理器函式中執行此操作。這個函式可以傳入targetproperty兩個引數

const dinner = 

const handler =

}const proxy = new proxy(dinner, handler)

track將檢查當前執行的是哪個***,並將其與 target 和 property 記錄在一起。這就是vue能知道property是該***的依賴項

重新修改一下handle函式

const dinner = 

const handler = ,

set(target,property,value,receiver)

}const proxy = new proxy(dinner, handler)

通過上述的例子,我們可以對vue如果追蹤屬性的變化有了了解

當乙個值被讀取時進行追蹤:proxy中的get處理函式中,track函式記錄了該property和當前***

當某個值改變時進行檢測: 在proxy上呼叫set處理函式

重新執行**來讀取原始值trigger函式查詢哪些***依賴於該propery並執行。

我們可以通過重寫乙個元件來寫乙個例子

data()

},computed:

}console.log(vm.sum) // 3

vm.val1 = 4

console.log(vm.sum) // 6

vue初學 3 深入理解vue元件

舉個例子比較能說明問題 1 vue.component row 如何解決?is語法 這樣就解決了這個問題了。vue.component counter data function methods 在兩個子元件用ref引用 接著在根元件中新增方法來處理資料 handlechange function ...

Vue3學習記錄(二)

vue2中有data computed method等,我們有時候尋找乙個變數或者函式就需要翻閱整段 vue3提出了組合式api,並且提出了可以使用組合式api的地方 setup。p click add 加1button div template import from vue export def...

《深入理解C 》第3版 學習進度備忘

學習資源 深入理解c 第3版 知識基礎支援 c in a nutshell o reilly出版社,是一本從頭介紹c 的優秀圖書。essential c 5.0 也不錯 跳過的內容 1 知識要點 1 當使用自定義型別的時候,如果與陣列相關,應使用類似list的泛型程式設計,這樣可以避免很多問題,例如...