vue3 watch方法---监视基本类型数据

watch  监听定义的数据发生改变的时候执行什么函数

watch 方法有两个参数 watch(sum，箭头函数)

这个箭头函数里面有两个参数(newValue,oldValue)=> {},如下代码

<template><!-- watch；监视数据变化 vue3 可以监视一下四种数据类型：ref定义的数据reactive  定义的数据函数返回一个值一个包含上述内容的数组--><div class="person">当前和:{{ sum }}<button @click="add">点我加一</button></div>
</template>
<script setup lang="ts">
// 需求：当值大于多少时，执行什么操作
import { ref,watch } from "vue";
let sum = ref(0);
function add() {sum.value++;
}
//监视
watch(sum, (newValue,oldValue)=>{console.log(newValue, oldValue);})
</script><style scoped>
.person {background: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
</style>

 

 解除监视：自己调用自己就可以解除监视,watch返回的是一个函数，只需将watch赋值给一个变量，再调用即可。

当sum的值大于5的时候，不进行监视了

//监视
let stopWatch = watch(sum, (newValue,oldValue)=>{console.log(newValue, oldValue);if (newValue > 5) {stopWatch();}
})