【Vue3】学习watch监视：深入了解Vue3响应式系统的核心功能（上）-阿里云开发者社区

【Vue3】学习watch监视：深入了解Vue3响应式系统的核心功能（上）

2024-03-06 98

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3】学习watch监视：深入了解Vue3响应式系统的核心功能（上）

🍋介绍

在Vue3中，watch 函数是一个非常强大且常用的功能，用于监视数据的变化并执行相应的操作。本文将深入探讨Vue3中的watch监视功能，包括基本用法、高级用法以及与Vue2中watch的比较。

特点：Vue3中的watch只能监视以下四种数据：

ref定义的数据。

reactive定义的数据。

函数返回一个值（getter函数）。

一个包含上述内容的数组。

🍋情况一：监视【ref】定义的基本数据类型

首先我们准备好需要的代码

<template>
  <div class="person">
   <h2>求和：{{ sum }}</h2>
   <button @click="changeSum">Sum+1</button>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
    import {ref} from 'vue'
    let sum = ref(0)
    function changeSum (){
        sum.value +=1
    }   
 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

接下来我们将watch导入一下

import {ref,watch} from 'vue'

接下来我们定义监视

watch(sum, (newValue,oldValue)=>{
      console.log(newValue,oldValue)
    })

运行结果如下

如果我们想要停止监视呢

const stopWatch = watch(sum, (newValue,oldValue)=>{
      console.log(newValue,oldValue)
      if(newValue >= 5)
      {
        stopWatch()
      }
    })

运行结果如下

注意：

🍋情况二：监视【ref】定义的对象类型数据

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：

若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。

若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。
准备代码数据如下

<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
    import {ref,watch} from 'vue'
    let person = ref({
      name:"馒头",
      age:22
    })
   function changeName(){
    person.value.name += '*'
   }
   function changeAge(){
    person.value.age += 1
   }
 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

接下来为了测试更明显，我们将watch写出来，并添加一个button，用来修改Person整体而并非是其中的数据

<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改人</button>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
    import {ref,watch} from 'vue'
    let person = ref({
      name:"馒头",
      age:22
    })
   function changeName(){
    person.value.name += '*' 
   }
   function changeAge(){
    person.value.age += 1
   }
   function changePerson(){
    person.value = {name:'小馒头',age:23}
   }
   watch(person,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
   })
 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>