vuejs3更新的生命周期钩子在状态更改时不被调用

Question

我正在学习来自React的Vue.js。我对updated生命周期挂钩感到困惑。无论我改变什么状态，我都无法让它运行。我在updated钩子中有一个console.log，在mounted钩子中设置了一个setTimeout。CCD_ 6回调运行并改变状态，这改变了DOM上显示的内容，尽管我从未从更新的钩子中看到CCD_。我不知道update为什么不发射

注意：我使用的是Vue.js 3。

<template>
...other components
</template>
<script>
export default {
name: 'App',
data: () => ({
state: 'initial'
}),
updated () {
console.log('UPDATED!!!')
},
mounted () {
setInterval(() => {
this.state = 'changed'
console.log('changing')
}, 1000)
}
}
</script>

Answer 1

updated生命周期挂钩仅在模板更新(重新渲染(时运行，而只有在模板中使用的属性更改值时才会运行。

由于state已被修改，并且updated钩子没有运行，这意味着模板没有使用state。还要注意，重复将state设置为相同的值只会触发新值的挂钩一次(假设模板需要state(。

例如，以下代码段将周期性地触发updated挂钩，因为计时器回调切换state，它在模板中呈现：

<template>
<div>{{ state }}</div>
</template>
<script>
export default {
name: 'App',
data: () => ({
state: 'initial'
}),
updated () {
console.log('UPDATED!!!')
},
unmounted () {
clearInterval(this._timerId)
},
mounted () {
this._timerId = setInterval(() => {
this.state = this.state === 'changed' ? 'initial' : 'changed'
console.log('changing')
}, 1000)
}
}
</script>

演示

也就是说，通常有一种更好的方法来使用Vue而不是updated挂钩(例如，在特定道具上使用watch(，但这取决于您的实际用例，这在问题中并不清楚。