一篇文章搞懂Vue3中的watch

#前端实习

前言：

最近感觉自己的工作学习进展还是比较慢，今天主要写的是Vue3中的watch的相关方法，呃啊，拖延症很严重啊啊，希望自己能早日该掉，要是哪天在白天更新，和不再每日感叹自己的拖延症那一天大概就是自己的拖延症克服的那一天吧，如果有啥希望能看到的或者错误的希望可以指出，接下来速速进入正文

---

Vue3-watch 侦听器

基础概念：

在Vue3中，watch的特性进行了一些的改变和优化，与computed不同的是，watch常常用于监听响应式数据的变化，并且执行一些相关的从操作。比如，发送网络请求，更新DOM操作等。

功能：

监视数据的变化去做对应的事情

监视数据走逻辑

watch可以监视四种东西

1. ref定义的数据
2. reactive定义的数据
3. 函数返回一个值（getter函数）
4. 一个包含上述内容的数组

基本语法：

watch(source, callback, options?)

遇到的相关情况

情况一

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

监视的适合不需要写.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++
}

//监视
const stopWatch = watch(sum,(newVal,oldVal)=>{
  console.log('sum发生了变化',newVal,oldVal);
  if(newVal > 10){
    console.log(