1、watch
1.1基本使用
作用:数据监听
语法:
watch(监听的数据, (改变后的数据, 改变前的数据) => {
console.log(newVal, oldVal);
})
注意点:watch写法上支持一个或者多个监听源,这些监听源必须只能是getter/effect
函数,ref数据,reactive对象,或者是数组类型
javascript
<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 200
console.log(newVal,oldVal);
})
// 监听多个数据
watch([name,()=>res.code],(newVal,oldVal)=>{
//['张三', '2001'] ['张三', 200]
console.log(newVal,oldVal);
})
</script>
1.2、深度监听、立即监听
关键字:
deep:true 深度监听
immediate:true 立即监听
javascript
<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
javascript
<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 |
---|---|---|
惰性 | 有惰性,不设置就不会立即执行 | 没有惰性,会立即执行 |
参数 | 语法上多个参数 | 不需要传递参数 |
获取值 | 可以获取到新旧值 | 不能获取到新旧值 |