vue3 中watch和watchEffect

监听：首先你要知道监听的是谁

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();

}