VUE|学习笔记③（Vue3核心语法）

 目录

watch监视

1. 情况一

2. 情况二

3. 情况三

4. 情况四

5. 情况五

watchEffect

• watch监视

watch的作用是监视数据的变化，且Vue3中的watch只能监视以下四种数据：ref/reactive定义的数据、函数返回的一个值（getter函数）以及包含以上内容的数组。

1. 情况一

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

首先依然是要先引入watch。vue2中的watch是一个配置项，而vue3不再是一个配置项了而是一个函数。

这里用到的watch函数里面有两个参数，首先是要监视的对象，再是它的一个回调函数。watch(谁？，回调函数)。

<template>
    <div class="person">
        <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
        <h2>当前求和为：{
  
  { sum }}</h2>
        <button @click="changeSum">点我sum+1</button>
    </div>
  </template>
  
<script setup lang="ts" name="App">
    import {ref, watch} from 'vue'
    //数据
    let sum =ref(0)
    //方法
    function changeSum(){
        sum.value+=1
    }
    //监视,情况一：监视【ref】定义的【基本类型】数据
    watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue);
    })
</script>

在监视ref定义的数据时不需要写.value，如果写的是sum.value那么这个监视就变成了监视sum的value属性而不是监视sum。但是，官方文档里明确说明了watch只能！是只能监视以上四种类型的数据，而sum才是ref定义的数据，sum.value不是。

那么如何解除这个监视呢？

例如，这里希望，当sum>=10的时候解除这个监视。

首先知道watch调用的时候是有一个返回值的，那么这个返回值是什么呢？可以在控制台打印一下

不难看出，x是一个函数。这里换一个写法，将x写成stopWatch，不难猜出这是什么意思。

在 Vue.js 中，watch 函数返回一个用于停止监听的函数。这个返回的函数就是用来取消对数据的监听的，从而停止执行回调函数。

2. 情况二

 监视ref定义的对象类型的数据。

 写监视之前，先写了以下简单代码，写到修改整个人的方法的时候稍微顿了一下，这里我有点忘记了，于是去查看了之前的笔记，ref是可以直接修改整个对象的，reactive定义的响应式对象不能直接修改整个对象，需要借助Object.assign。如果有不清楚的可以查看我的笔记②，入口：https://blog.csdn.net/2403_89168113/article/details/143983358?spm=1001.2014.3001.5502，位置在【ref对比reactive】那一部分，或者大家查询其它资料自己了解。

<template>
    <div class="person">
        <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
        <h2>姓名：{
  
  { person.name }}</h2>
        <h2>年龄：{
  
  { person.age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个人</button>
    </div>
  </template>
  
<script setup lang="ts" name="App">
    import {ref, watch} from 'vue'
    //