vue3 watchEffect 之3 简单介绍

这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

watchEffect 如果在里面已有了副作用定义(就是有需要监听的数据了)， 调用一般是在所有组件更新之前调用 在这里我们就简单写下代码

在看下打印出来的数据

可以看到 如果更新数据 是watchEffect先执行，onBeforeUpdate在后面执行

watchEffect有第两个选项，之前文章里有过简单描述，咱们这里在介绍下

组件更新之后 会重新运行watchEffect,第两个选项主要是控制watchEffect运行顺序的 pre 是在组件更新之前运行 post 是在upBeforeUpdate之后运行，看下面的图片 sync 是同步执行 会让watchEffect强制的同步执行，这种的话效率比较低

watchEffect(()=>{},{
   flush: ‘pre’ // 这是默认值
})

大家可以明显的看出打印出的顺序不一样了 在看下代码截图

只是多加了一个 flush: ‘pre’参数

如果我们想在watchEffect访问dom 我们需要他写在onMounted函数里 代码简单写下 这是没有写在onMounted,第一次拿到是null

watchEffect( async(onInvalidate)=>{
         console.log(gll.value)
         console.log(myref.value)
         onInvalidate(()=>{
          console.log('onInvalidate')
         })
      })

写在onMounted函数里的情况 代码

    onMounted(()=>{
      watchEffect( async(onInvalidate)=>{
         console.log(gll.value)
         console.log(myref.value)
         onInvalidate(()=>{
          console.log('onInvalidate')
         })
      })
    })

这是打印出的log

可以看到上图 打印出的没有null

还有一种方法就是可以改watchEffect第两项参数 flush: ‘post’ 也可以拿到dom

watchEffect第两个参数 监听功能，这个也在其他文章简单介绍过类似的函数， onRenderTriggered和onRenderTriggered这两个钩子函数

watchEffect( async(onInvalidate)=>{
      },{
        onTrack: (e)=>{}, // 是追踪 第一次被收集就会触发 看下截图
        onTrigger: (e)=>{} // 是触发变化 watchEffect在次出发时
      })

看下打印出的数据

onTrigger的=打印出数据

也可以加debugger调试 这是代码截图