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