Vue3：watch监视的5种情况

一、情景说明

在Vue2中，watch的用法如下
https://blog.csdn.net/Brave_heart4pzj/article/details/135604394

这一篇，来学习Vue3中的watch用法

二、案例

1、监视ref定义的数据【基本类型】

引入函数

 import {ref,watch} from 'vue'
1

定义变量

    // 数据
    let sum = ref(0)
1
2

watch监视变量
注意：
1、监视的ref变量，不可以写成sum.value
2、这里居然可以递归调用哦！！！

    // 监视，情况一：监视【ref】定义的【基本类型】数据
    const stopWatch = watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue)
        if(newValue >= 10){
            stopWatch()
        }
    })
1
2
3
4
5
6
7

2、监视ref定义的数据【对象类型】

引入函数

 import {ref,watch} from 'vue'
1

定义变量

    // 数据
    let person = ref({
        name:'张三',
        age:18
    })
1
2
3
4
5

watch监视变量
监视的是对象的地址值
若想监视对象内部属性的变化，需要手动开启深度监视
watch的第一个参数是：被监视的数据
watch的第二个参数是：监视的回调
watch的第三个参数是：配置对象（deep、immediate等等…）
注意：
如果这里不配置deep项，则修改person里面的属性，不会触发监视。

    watch(person,(newValue,oldValue)=>{
        console.log('person变化了',newValue,oldValue)
    },{deep:true})
1
2
3

3、监视reactive定义的数据

引入函数

 import {reactive,watch} from 'vue'
1

定义变量

    // 数据
    let person = reactive({
        name:'张三',
        age:18
    })
1
2
3
4
5

watch监视变量
默认是开启深度监视的，且无法关闭

    watch(person,(newValue,oldValue)=>{
        console.log('person变化了',newValue,oldValue)
    })
1
2
3

4、有一个返回值的函数

解决，watch单独监视对象中某个属性的变化的情况
引入函数

 import {reactive,watch} from 'vue'
1

定义变量

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
1
2
3
4
5
6
7
8
9

watch监视变量
1、监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式

     watch(()=> person.name,(newValue,oldValue)=>{
      console.log('person.name变化了',newValue,oldValue)
    })
1
2
3

2、监视响应式对象中的某个属性，且该属性是对象类型的
可以直接写，也能写函数，更推荐写函数，根据需要开启深度监视

    watch(()=>person.car,(newValue,oldValue)=>{
        console.log('person.car变化了',newValue,oldValue)
    },{deep:true})
1
2
3

5、一个包含上述内容的数组

引入函数

 import {reactive,watch} from 'vue'
1

定义变量

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
1
2
3
4
5
6
7
8
9

watch监视变量
监视多个属性，用数组组装后，即可进行监视

    watch([()=>person.name,person.car],(newValue,oldValue)=>{
        console.log('person.car变化了',newValue,oldValue)
    },{deep:true})
1
2
3