vuejs3 обновленный хук жизненного цикла не вызывается при изменении состояния

Я изучаю Vue.js из React. Я запутался в updatedкрючке жизненного цикла. независимо от того, в каком состоянии я меняю, я не могу заставить его работать. У меня console.logвнутри updatedкрючок, и я установил setTimeoutв mountedкрючок. обратный вызов setTimeoutзапускается и изменяет состояние, которое меняет то, что отображается в DOM, хотя я никогда не вижу console.logиз обновленного хука. Я не уверен, почему 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>

Решение проблемы

Хук 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хука (например, использовать a watchдля конкретной опоры), но это зависит от вашего фактического варианта использования, который не ясен в вопросе.