Svelte beforeUpdate 和 afterUpdate

顧名思義，beforeUpdate 函數(shù)實(shí)現(xiàn)在DOM渲染完成前執(zhí)行。afterUpdate函數(shù)則相反，它會(huì)運(yùn)行在你的異步數(shù)據(jù)加載完成后。

總之，它們對(duì)于一些需要以狀態(tài)驅(qū)動(dòng)的地方很有用, 例如渲染標(biāo)簽的滾動(dòng)位置。

這個(gè) Eliza 聊天機(jī)器人窗口體驗(yàn)不太好，一旦消息超過窗口高度，你必須手動(dòng)滾動(dòng)窗口才能查看最新消息，讓我們來改進(jìn)它：

let div;
let autoscroll;

beforeUpdate(() => {
	autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
});

afterUpdate(() => {
	if (autoscroll) div.scrollTo(0, div.scrollHeight);
});

請(qǐng)注意，beforeUpdate 函數(shù)需要在組件掛載前運(yùn)行，所以我們需要先將 div 與組件標(biāo)簽綁定，并判斷 div 是否已被正常渲染。