vue3之watchEffect详解

2023-08-17 158

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue3之watchEffect详解

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)
    }
})