c++ log函数_vue3.0项目开发（八）新特性之响应式系统watchEffect函数

watchEffect会立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

vue3.0 beta

{{ original.count }} ----- {{ copy.count }}

add

执行以上代码，当你点击按钮的时候，你会看到控制台一直在输出，因为 watchEffect 函数的依赖 count 数据，所有只要 数据有变化，就会触发 watchEffect 函数的回调。

停止侦听

当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时， 侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。

在一些情况下，也可以显式调用返回值以停止侦听：

// 接收 watchEffect 函数的返回值const stop = watchEffect(() => console.log(count.value)) const add = () => {   count.value++   if (count.value >= 10) {     // 停止监听   stop()   } }

清除副作用

侦听副作用传入的函数可以接收一个 onInvalidate 函数作入参, 用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发:

• 副作用即将重新执行时
• 侦听器被停止 (如果在 setup() 或 生命周期钩子函数中使用了 watchEffect, 则在卸载组件时)

watchEffect((onInvalidate) => {  console.log(count.value)  onInvalidate(() => {    // id 改变时 或 停止侦听时    // 取消之前的异步操作   c  })})

从上面的代码可以看到当我们调用 stop 停止监听时，可以看到 console.log('我触发了') 还是被触发了，但是 console.log(count.value) 没有被触发。

访问DOM或者模板

onMounted(() => {  watchEffect(() => {    // 在这里可以访问到 DOM 或者 template refs  })})

初始化运行是在组件 mounted 之前执行的。因此，如果你希望在编写副作用函数时访问 DOM(或模板 ref)，请在 onMounted 钩子中进行。