vue3 数据监听（watch、watchEffect）

1、watch

1.1基本使用

作用：数据监听

语法：

watch(监听的数据, (改变后的数据, 改变前的数据) => {

console.log(newVal, oldVal);

})

注意点：watch写法上支持一个或者多个监听源，这些监听源必须只能是getter/effect函数，ref数据，reactive对象，或者是数组类型

<template><div><h1>watch</h1><p>name: {{ name }} <button @click="btn">修改名字</button></p><p><input type="text" v-model="code" /> {{ code }}</p></div>
</template><script setup>
import { ref,reactive,toRefs, watch } from 'vue';// 定义变量let name=ref('张三')const btn=()=>{name.value='李四'}// 监听单个数据watch(name,(newVal,oldVal)=>{//            李四 张三console.log(newVal,oldVal);})// 定义对象let res=reactive({code:200,data:[],massge:'ok'})const {code}=toRefs(res)// 监听对象watch(()=>res.code,(newVal,oldVal)=>{//            2001 200console.log(newVal,oldVal);})// 监听多个数据watch([name,()=>res.code],(newVal,oldVal)=>{//['张三', '2001'] ['张三', 200]console.log(newVal,oldVal);})
</script>

1.2、深度监听、立即监听

关键字：

deep:true 深度监听

immediate:true 立即监听

<template><div><h1>watch</h1><p><input type="text" v-model="res.user.name" /> {{ res.user.name }}</p></div>
</template><script setup>
import { ref,reactive,toRefs, watch } from 'vue';// 定义对象let res=reactive({user:{name:'张三'}})// 监听多个数据watch(()=>res.user,(newVal,oldVal)=>{console.log(newVal,oldVal);},{deep:true,immediate:true})
</script>

2、watchEffect

watchEffect用来简化 watch，不需要指定监听对象

而是根据函数内的依赖，用到了什么当它发生变化时，自动触发

watchEffect回调会立即执行不需要指定immediate

    <template><div><h1>watchEffect</h1><p><input type="text" v-model.number="num1"><input type="text" v-model.number="num2"></p></div></template><script setup>import { ref,watchEffect } from 'vue';let num1=ref(0);let num2=ref(1);watchEffect(()=>{console.log(num1.value+num2.value);console.log('执行啦watchEffect');})</script>

对比点	watch	watchEffect
惰性	有惰性，不设置就不会立即执行	没有惰性，会立即执行
参数	语法上多个参数	不需要传递参数
获取值	可以获取到新旧值	不能获取到新旧值