watch和watchEffect监听

watch:

第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组，在每次响应式状态发生变化时触发回调函数

我们可以在v-model定义一个响应式变量，然后通过watch来监听这个变量

代码示例：

<view class="box">
		<input type="text" placeholder="请输入内容" v-model="iptMod">
	</view>
	输入的值：{{iptMod}}

import { ref, watch } from 'vue';

const iptMod=ref("");//响应式变量
//监听iptMod
watch(iptMod,(newValue,oldValue)=>{
	console.log(newValue);//新值
	console.log(oldValue);//老值
})

 当然我们也可以通过watch来监听对象或者对象的某一个值，watch默认是一个浅层监听如果想要开启深层监听有两种方式第一个就是 getter 函数，watch的第一个参数就不能是响应式函数了，我们可以使用（）=>箭头函数的方式来监听

代码示例：

<template>
	<view class="box">
		<input type="text" placeholder="请输入内容" v-model="iptMod.name">
	</view>
	{{iptMod}}
</template>
<script setup>
import { ref, watch } from 'vue';

const iptMod=ref(
	{id:1,name:"张三",price:4399});//响应式变量
//监听iptMod
watch(()=>iptMod.value.name,(newValue,oldValue)=>{
	console.log(newValue);//新值
	console.log(oldValue);//老值
})

</script>

还可以通过watch的第三个参数来开启深层监听，deep:true，当我们输入内容时我们可以拿到这个对象

代码示例：

<template>
	<view class="box">
		<input type="text" placeholder="请输入内容" v-model="iptMod.name">
	</view>
	{{iptMod}}
</template>
<script setup>
import { ref, watch } from 'vue';

const iptMod=ref({id:1,name:"张三",price:4399});//响应式变量
//监听iptMod
// watch(()=>iptMod.value.name,(newValue,oldValue)=>{
// 	console.log(newValue);//新值
// 	console.log(oldValue);//老值
// })
watch(iptMod,(newValue)=>{
	console.log(newValue);
},{deep:true});//deep:true 开启深层监听

</script>

 但是这个监听函数是我们改变输入框时才会拿到，如果想要立即拿到这个对象的话我们可以在第三个参数上加上一个immediate:truel

代码示例：

watch(iptMod,(newValue)=>{
	console.log(newValue);
},{deep:true,immediate:true});//deep:true 开启深层监听 immediate立即监听拿到

 扩展：监听两个时可以使用数组来监听，

比如：

watch(([iptMod1,iptMod2]),([new1,old1],[new2,old2])=>{
	console.log(new1,old1);
	console.log(new2,old2);
})

 watchEffect()自动监听只要上面的输入框发生变化就能监听到

watchEffect(()=>{
	console.log(iptMod1,iptMod2);
})

​