生命周期
Markup 公开了一些可用于深入了解模板生命周期的方法：
onMount：在安装模板时调用一个函数的方法，该方法可以在卸载模板时返回另一个要调用的函数；onUpdate：当渲染模板中的某些内容发生变化时，该方法需要调用一个函数；onMove：当模板内容从 DOM 中的一个位置移动到另一个位置时调用函数的方法。
所有生命周期回调都将使用模板实例作为第一个参数来调用，您可以使用该实例对模板本身进行操作。
onMount
当通过任何渲染方法渲染模板时，onMount 方法需要调用一个函数。该函数可以返回另一个在模板卸载时调用的函数。
javascript
const temp = html`<h1>Hello World</h1>`
temp.onMount(() => {
// handle mount
console.log('mounted')
return () => {
// handle unmount
console.log('unmounted')
}
})
temp.render(document.body) // triggers mount
temp.unmount() // trigger unmount可以通过调用 unmount 或当模板因父模板中的某些更改而被删除时触发卸载事件。
这些生命周期非常适合围绕模板进行设置和清理。这些是诸如使用计时器或其他留在后台的事件驱动操作之类的事情。
javascript
const [count, setCount] = state(0)
const temp = html`<p>${count}</p>`
temp.onMount(() => {
let interval = setInterval(() => {
setCount((prev) => prev + 1)
}, 1000)
return () => {
clearInterval(interval)
}
})
temp.render(document.body)
setTimeout(() => {
temp.unmount()
}, 10000)onUpdate
每当模板中的某些内容发生更改时，onUpdate 方法就会调用一个函数。这可以添加、删除或更新属性或节点。
javascript
const [count, updateCount] = state(0)
const temp = html`<p>${count}</p>`
temp.onUpdate(() => {
console.log(temp.toString())
// prints: "<p>10</p>"
})
temp.render(document.body)
updateCount(10)如果你想对特定的状态变化做出反应，你可以使用effect。当您想要拍摄模板快照或执行与模板相关的通用副作用时，onUpdate 非常适合。
onMove
每当模板渲染目标发生更改时，onMove 方法都会调用一个函数。
javascript
const temp = html`<h1>Hello World</h1>`
temp.onMove(() => {
console.log('moved to', temp.parentNode)
})
temp.render(document.body)
setTimeout(() => {
temp.render(document.getElementById('app'))
}, 1000)该生命周期非常适合根据模板位置执行操作。这些可以是 DOM 重新排序或拖放操作等。
链接
所有模板生命周期和渲染方法都可以链接，并且您应该始终在渲染任何内容之前设置生命周期。
javascript
const [count, updateCount] = state(0)
const temp = html`<p>${count}</p>`
.onMount(() => {
console.log('mounted')
return () => {
console.log('unmounted')
}
})
.onUpdate(() => {
console.log('udpated', temp.toString())
})
.onMove(() => {
updateCount(10)
console.log('moved', temp.parentNode)
})
.render(document.body)
setTimeout(() => {
temp.render(document.getElementById('app'))
}, 1000)
setTimeout(() => {
temp.unmount()
}, 2000)