监听：首先你要知道监听的是谁
1、下边是监听search变量的例子，后边的函数newSearch和prevSearch这两个形参，当然名字可以自己定义，newSearch是新值，prevSearch是原先的值，如下
<script setup>
import { ref, reactive, computed,watch,watchEffect } from "vue";
const names = ref([{ name: "小猫" }, { name: "小狗" }, { name: "小猪" }]);
const search = ref("");
const searchNames = computed(() => {
return names.value.filter((item) => item.name.includes(search.value));
})
watch(search,(newSearch,prevSearch)=>{
console.log("watch函数触发了",newSearch,prevSearch);
})
</script>
<template>
<div class="home">
<!--input textarea select 这三个标签支持双向数据绑定-->
<input type="text" v-model="search" />
<p v-for="(item,index) in searchNames" :key="index">{{item.name}}</p>
</div>
</template>
<style scoped>
</style>
2、下边监听的是多个对象，用数组的形式，如下
<script setup>
import { ref, reactive, computed,watch,watchEffect } from "vue";
const names = ref([{ name: "小猫" }, { name: "小狗" }, { name: "小猪" }]);
const search = ref("");
const searchNames = computed(() => {
return names.value.filter((item) => item.name.includes(search.value));
})
watch([search,names],([newSearch,newNames],[prevSearch,prevNames])=>{
console.log("watch函数触发了",newSearch,prevSearch,newNames,prevNames);
})
</script>
<template>
<div class="home">
<!--input textarea select 这三个标签支持双向数据绑定-->
<input type="text" v-model="search" />
<p v-for="(item,index) in searchNames" :key="index">{{item.name}}</p>
</div>
</template>
<style scoped>
</style>
watch([search,names],([newSearch,newNames],[prevSearch,prevNames])=>{
console.log("watch函数触发了",newSearch,prevSearch,newNames,prevNames);
})
监听的对象和后边的函数中的参数是对应的关系。
3、watchEffect：默认初始化会执行一次 ，和watch不同的是你不需要指定监听某个属性，而是在回调函数中应用了某个属性，只要这个属性发生变化就会监听执行。
<script setup>
import { ref, reactive, computed,watch,watchEffect } from "vue";
const names = ref([{ name: "小猫" }, { name: "小狗" }, { name: "小猪" }]);
const search = ref("");
const searchNames = computed(() => {
return names.value.filter((item) => item.name.includes(search.value));
})
watch([search,names],([newSearch,newNames],[prevSearch,prevNames])=>{
console.log("watch函数触发了",newSearch,prevSearch,newNames,prevNames);
})
watchEffect(()=>{
console.log("watchEffect触发了"+search.value);
})
</script>
<template>
<div class="home">
<!--input textarea select 这三个标签支持双向数据绑定-->
<input type="text" v-model="search" />
<p v-for="(item,index) in searchNames" :key="index">{{item.name}}</p>
</div>
</template>
<style scoped>
</style>
watchEffect(()=>{
console.log("watchEffect触发了"+search.value);
})
括号中不需要指定监听的属性
4、停止监听
<script setup>
import { ref, reactive, computed,watch,watchEffect } from "vue";
const names = ref([{ name: "小猫" }, { name: "小狗" }, { name: "小猪" }]);
const search = ref("");
const searchNames = computed(() => {
return names.value.filter((item) => item.name.includes(search.value));
})
/* watch([search,names],([newSearch,newNames],[prevSearch,prevNames])=>{
console.log("watch函数触发了",newSearch,prevSearch,newNames,prevNames);
})
watchEffect(()=>{
console.log("watchEffect触发了"+search.value);
}) */
const stopWatch = watch([search,names],([newSearch,newNames],[prevSearch,prevNames])=>{
console.log("watch函数触发了",newSearch,prevSearch,newNames,prevNames);
})
const stopEffect = watchEffect(()=>{
console.log("watchEffect触发了"+search.value);
})
const handleClick=()=>{
stopWatch();
stopEffect();
}
</script>
<template>
<div class="home">
<!--input textarea select 这三个标签支持双向数据绑定-->
<input type="text" v-model="search" />
<button @click="handleClick">停止监听</button>
<p v-for="(item,index) in searchNames" :key="index">{{item.name}}</p>
</div>
</template>
<style scoped>
</style>
将监听的函数定义一个属性去接收，然后再定义一个函数里面去调用这个函数就可以停止监听。
const stopEffect = watchEffect(()=>{
console.log("watchEffect触发了"+search.value);
})
const handleClick=()=>{
stopWatch();
stopEffect();
}