vue3中watch监听的四种写法

本文主要介绍了vue3中watch监听的四种写法,包含了ref 定义的数据,reactive定义的数据,函数返回的值（getter函数）和前面3个内容的数组,具有一定的参考价值,感兴趣的可以了了解一下

作用：监视数据的变化（和vue2中的watch作用一致）

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

1、ref 定义的数据

2、reactive定义的数据

3、函数返回的值（getter函数）

4、前面3个内容的数组

写法

情况一

监视ref定义的基本数据类型：直接写数据名即可，监视的是value值的改变

<template>
  <div class="person">
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为：{
  {sum}}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value += 1
  }
  // 监视，情况一：监视【ref】定义的【基本类型】数据
  const stopWatch = watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue) //newValue是新的数据，oldvalue是旧的数据
    if(newValue >= 10){
      stopWatch()
    }
  })
</script>

情况二

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

<template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{
  { person.name }}</h2>
    <h2>年龄：{
  { person.age }}