Svelte beforeUpdate 和 afterUpdate

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

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

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

let div;
let autoscroll;

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

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

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