watchEffect函数的作用：
传入的一个函数，当依赖项变化的时候，重新执行改函数。
watchEffect函特性：
与watch相似都可以监听一个数据源。
但是watchEffect会在初始化的时候调用一次，与watch的immediate类似。
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) } })
watchPostEffect
watchEffect 的别名，带有 flush: ‘post’ 选项。
watchSyncEffect
watchEffect 的别名，带有 flush: ‘sync’ 选项。
