watch监视-ref基本类型数据

网络点点滴2025-11-10 16:12

watch监视-ref基本类型数据

watch的使用场景

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

作用

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

使用watch的基本步骤

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

js 复制代码

<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，先要引入它

js 复制代码

import { ref,watch } from 'vue';

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

vue 复制代码

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

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

js 复制代码

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

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

js 复制代码

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