Vue3中watch(5种情况)和watchEffect的用法

目录

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

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

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

情况三：监视【reactive】定义的【对象类型】数据

情况四：监视【ref、reactive】定义的【对象类型】数据中的某个属性

 情况五：监视上述多个数据

watchEffect

---

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

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

1. ref 定义的数据

2. reactive 定义的数据

3. 函数返回的一个值

4. 一个包含上述内容的数组

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

   import { ref,watch } from 'vue'
   let sum = ref(1);
 
   // watch 接收两个参数
   // 第一个是要监听的值
   // 第二个是监听的值发现变化要执行的函数
   // watch 返回一个函数，函数作用是停止监听
   const stopWatch = watch(sum, (newValue,oldValue)=>{
      // newValue 是新的值
      // oldValue 是旧的值
      if(newValue>=10){
         stopWatch()
      }
   })

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

当监视【ref】定义的【对象类型】数据时：

1. 修改对象里的某个属性时是不会触发监听的

2. 只有修改整个对象的时候才会触发

注意：如果要修改对象里的某个属性时也触发监听侧需要传递第三个参数，第三个参数是一个配置对象：{deep: true}

第三个参数可配置：

1. immediate：在监听创建时立即触发回调，第一次调用时旧值是undefined

2. deep：如果监听的值是对象，强制使用深度遍历，一遍在深层级变更时触发回调

import { ref, watch } from 'vue'
 
let person = ref({
   name: "张三",
   age: 18
});
 
watch(person, (newValue, oldValue) => {
   console.log(newValue, oldValue)
},{deep: true, immediate: true})

情况三：监视【reactive】定义的【对象类型】数据

1. 监听时默认开启了深度监视，并且关不掉

import { reactive, watch } from 'vue'
 
let person = reactive({
   name: "张三",
   age: 18
});
// 默认开启深度监视
watch(person, (newValue, oldValue) => {
   console.log(newValue, oldValue)
})

情况四：监视【ref、reactive】定义的【对象类型】数据中的某个属性

1. 监听的属性是基本数据类型，需要写成函数返回值

import { reactive, watch } from 'vue'
 
let person = reactive({
   name: "张三",
   age: 18
});
 
// 监听的值写成函数返回值
watch(()=>person.name, (newValue, oldValue) => {
   console.log(newValue, oldValue)
})

2. 监听的属性是一个对象，则可以直接写或者写成函数返回值

import { reactive, watch } from 'vue'
 
let person = reactive({
   cra:{
      c1:"奔驰",
      c2:"宝马"
   }
});
 
// 只能监听到 c1、c2的变化，整个 cra 对象改变监听不到
watch(person.cra, (newValue, oldValue) => {
   console.log("直接写")
})
 
// 只能监听到整个 cra 对象改变，c1、c2的变化监听不到
watch(()=>person.cra, (newValue, oldValue) => {
   console.log("函数形式")
})
 
// cra、c1、c2 都能监听到，推荐写法
watch(()=>person.cra, (newValue, oldValue) => {
   console.log("函数形式+深度监听")
},{deep:true})

 情况五：监视上述多个数据

import { reactive, watch } from 'vue'
 
let person = reactive({
   name: "张三",
   age: 18,
   cra: {
      c1: "奔驰",
      c2: "宝马"
   }
});
 
// 监视上述多个数据
watch([()=>person.name,()=>person.cra], (newValue,oldValue) => {
   console.log("监视上述多个数据",newValue,oldValue)
},{deep:true})
 

watchEffect

不明确指出监听的数据，用到啥监视啥
watchEffect会在初始化的时候调用一次，与watch的immediate类似。

import {watchEffect} from 'vue'
watchEffect(() => {
    console.log(`当${sum.person.age}的值变化的时候调用，初始化
    的时候也调用一次
     `)
})