watch监视-ref基本类型数据

watch监视-ref基本类型数据

watch的使用场景

比如你有一个昵称。当用户修改了自己的昵称，你希望在控制台打出新的昵称，然后向服务器发送请求，更新后台数据，最后需要弹出提示框，告诉用户修改成功了，但是这一系列的操作的前提就是你要知道用户修改了昵称，你要监视用户修改昵称的这个操作；

• 作用

监听一个或多个数据的变化，并在数据变化时执行特性的副作用；通俗的讲，它就是一个监视器，它的工作就是盯着一个数据，一点数据变化了，它就立即向你汇报，并且执行你交代数据变化后的任务；

使用watch的基本步骤

• 首先预设一段非常简单的代码，计数器

<template><div class="person"><h2>{{ sum }}</h2><button @click="sumA">点我加1</button></div>
</template><script lang="ts" setup>
import { ref } from 'vue';let sum = ref(0)function sumA() {sum.value += 1  
}</script><style scoped>.person{background-color: rgb(39, 148, 191);padding-left: 50px;}.btn {display: flex;gap:20px}
</style>

• 在vue3中，如果我们想要使用watch，先要引入它

import { ref,watch } from 'vue';

• 之后我们来监视这个数字的变化

watch(sum,(newValue,oldValue) => {console.log(`sum发生了变化,原来的值是${oldValue},现在的值是${newValue}`);
})

• 那如果我们现在有这样的一个需求，当数字加到10的时候，就停止监听

const watchStop = watch(sum,(newValue,oldValue) => {console.log(`sum发生了变化,原来的值是${oldValue},现在的值是${newValue}`);console.log(watchStop)
})

这个代码就讲述了watch具有停止监听的能力

const watchStop = watch(sum,(newValue,oldValue) => {console.log(`sum发生了变化,原来的值是${oldValue},现在的值是${newValue}`);if(newValue >= 10) {watchStop();}
})