自动侦听器

@WatchEffect

Overview

立即运行一个回调函数|副作用，同时自动感知代码依赖|追踪其中的数据源，并在其变化时重新执行回调函数

关注的是数据的状态变化，并不关注数据变化前后的值

需引入包 watchEffect

import { watchEffect } from 'vue'

function watchEffect(
  effect: (onCleanup: OnCleanup) => void,
  options?: WatchEffectOptions
): StopHandle

effect：回调函数，也叫副作用函数 side effect，即某种操作，如对外部可变数据或变量的修改，外部接口的调用等

onCleanup：回调函数的可选参数，是一个函数，用来注册清理回调；清理回调会在该副作用下一次执行前被调用

options：可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖

StopHandle：自动侦听器函数返回一个停止器函数，详见后续内容

更多信息，请访问watchEffect()

watch 仅在侦听的数据源确实改变时才会触发回调；执行0-N次

watchEffect 会立即执行回调函数，也称自动侦听器，等同于使用了立即配置项immediate；执行1-N次

watch 必须显式的指定某个侦听的数据源|变量

watchEffect 会自动侦听数据源|变量

watch 控制更为精细；旧值、新值、deep、immediate

watchEffect 更有效，只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性；但是不能获取旧值、

[] 分析下面代码的功能

watchEffect((onCleanup) => {
    str.value = msg.value.split('').reverse().join('');
    onCleanup(()=>{
        console.log('clean done');
    })
})

[] 使用watchEffect自动侦听多个数据

ref对象 - 自动侦听name和age

let temp = ref(0)
let hei = ref(0)
watchEffect(() => {
    //侦听1
    if (temp.value > 10 || hei.value > 20) {
    console.log('data is meet');
    }
    //侦听2
    //侦听3
    //侦听...
})
function tempCh() {
    temp.value += 2
}
function heiCh() {
    hei.value += 2
}

停止侦听

在大多数情况下，你无需关心怎么停止一个侦听器

要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数

[] 停止侦听

const stopWatch = watchEffect(num, (newv, oldv) => {})

stopWatch()