認(rèn)識副作用函數(shù)與響應(yīng)式數(shù)據(jù)
在分析
vue3響應(yīng)式的實現(xiàn)前躏嚎，我們需要先搞清兩個概念：副作用函數(shù)袁辈、響應(yīng)式數(shù)據(jù)媳危。
副作用函數(shù)
副作用函數(shù)，顧名思義，會產(chǎn)生副作用的函數(shù)被稱為副作用函數(shù)荆陆。那么什么是副作用呢帜消？如果幾個函數(shù)的運行，可能會影響到其他函數(shù)或變量，那么這種影響就是一種副作用。我們來看兩個例子：
function changeText(text: string) {
document.body.innerText = text
}
function getText() {
return document.body.innerText
}
changeText函數(shù)會修改body的內(nèi)容。getText會返回body的內(nèi)容。如果我們使用changeText修改了body內(nèi)容，那么會影響到getText獲取內(nèi)容，那么這時changeText就是個副作用函數(shù)。副作用函數(shù)不一定非要對某些函數(shù)產(chǎn)生副作用，如果一個函數(shù)修改了全局變量，這其實也是個副作用函數(shù)。
var flag = true
function changeFlag() {
flag = !flag
}
changeFlag函數(shù)會更改一個全局變量flag，那么這也是一種副作用凄杯，所以changeText也是個副作用函數(shù)膊存。
響應(yīng)式數(shù)據(jù)
let obj = { a: 1, b: 1 }
function sum(a: number, b: number) {
return a + b
}
let c = sum(obj.a, obj.b)
以上代碼c的結(jié)果為2爵卒，這很簡單陌僵。如果我們將obj.a變?yōu)?碗短，那么c的結(jié)果是不會變的搭盾，我們必須再次調(diào)用sum函數(shù)炕舵，才能得到我們想要的結(jié)果奸攻。想象一下辐赞，如果我們更改obj.a或obj.b赘风，不需要我們調(diào)用sum函數(shù)，c能同步更新該多好掏父，如果可以實現(xiàn)這種功能钾挟，那么obj我們就可以稱為響應(yīng)式數(shù)據(jù)。
