watchEffect 関数の役割:
渡された関数は、依存関係が変更されたときに、変更された関数を再実行します。
watchEffect 関数の機能:
watch と同様に、データ ソースを監視できます。
ただし、watchEffect は、watch の即時と同様に、初期化中に 1 回呼び出されます。
watchEffect の使用
watchEffect(() => {
console.log(`当${
sum.person.age}的值变化的时候调用，初始化
的时候也调用一次
`)
}) //打印结果
//18 的值变化了！初始化调用
//19 的值变化了依赖项调用
watchEffect は副作用関数を受け入れます
watchEffect(onInvalidate => {
console.log(`${
sum.person.age} 的值变化了！`)
onInvalidate(() => {
console.log('清除副作用函数执行了！')
})
}) //打印结果
//18 的值变化了！
//清除副作用函数执行了！
//19 的值变化了！
onInvalidate クリア副作用関数に関する注意事項
1.该函数总是在watchEffect执行的时候再次执行
2.当组件被销毁的时候该函数再次执行
3.该函数总是优先于watchEffect中的同步/异步代码执行
4.Promize函数的执行应该在该函数下面
副作用関数をクリアするonInvalidateの実行タイミングはflushで制御
watchEffect(onInvalidate => {
console.log(`${
sum.person.age} 的值变化了！`)
onInvalidate(() => {
console.log('清除函数执行了！')
})
},{
//'pre' 在组件更新更新前运行,默认为'pre'
//'post'在组件更新更新后运行
//'sync'强制效果始终同步触发。然而，这是低效的，应该很少需要。
flush:'post'
})//打印结果
//18 的值变化了！
//清除函数执行了！
// 19 的值变化了！
watchEffect リスナーのデバッグ
watchEffect(() => {
console.log(`${
sum.person.age} 的值变化了！`)
}, {
onTrack(e) {
//追踪其依赖的时候触发,只能在开发者模式下使用
console.log(e.target)
},
onTrigger(e) {
//依赖项被改变的时候触发,只能在开发者模式下使用
console.log(e.target)
}
})
ウォッチポストエフェクト
フラッシュ付きのwatchEffectのエイリアス：「post」オプション。
watchSyncEffect
フラッシュ付きのwatchEffectのエイリアス：「sync」オプション。
＃時計