vue3.x教程-watch监听器的使用2-监视 ref对象类型

介绍

监视 ref对象类型,分两种:

  • 默认情况
  • 开启深度监视

默认情况

监视 ref定义的 对象类型,监视的是对象的 地址,当对象地址发生变化(即:给对象赋值时),才会执行监视器函数

提示:若想监视对象内部的数据,要手动开启深度监视。

例子

与 vue3.x教程-watch监听器的使用1-监视 ref基本类型 类似,但是表单内容更多,为了更好的管理,将属性放到变量中,比如:年龄、密码。。。

html代码:

<template>
    年龄: <input type="text" v-model="student.age" />
    <br>
    密码: <input type="text" v-model="student.password" />
    <br>
    <button @click="modify">给student赋新值</button>
</template>

ts代码:

<script lang="ts" setup name='Student'>
    // 导入 watch
    import { ref,watch } from 'vue'
    // 定义对象
    let student = ref({
        age:'',
        password:'',
    })
    // 监视器
    watch(student,(newValue,oldValue)=>{
        console.log("新值:",newValue)
        console.log("原值:",oldValue)

    })
    // 给student赋新对象时,student地址会改变,才会被监视器看到,执行监视函数
    function modify(){
        student.value = {
            age:'20',
            password:'123456'
        }
    }
</script>

特点

默认情况:

  • 修改 student 对象的属性时,不会被监视器看到,即:不会执行监视器函数

  • 给 student 赋新对象时,student 地址会改变,才会被监视器看到,执行监视函数

开启深度监视

监视 ref定义的 对象类型,手动开启深度监视,当对象的 属性值发生变化,就会执行监视器函数

开发深度监视

修改 watch() 函数,增加第3个参数,启用深度监视,对象的属性值发生变化时,也能监视到

例子

修改上面例子的 watch() 函数,如下:

watch(student,(newValue,oldValue)=>{
    console.log("新值:",newValue)
    console.log("原值:",oldValue)

},{
    // 启用深度监视,对象的属性值发生变化时,也能监视到
    deep:true
})

特点

对象中,任意一个属性发生变化,都会监视到

注意:修改属性后,新值、原值是一样的

如上图,修改年龄后,新值、原值是一样的,这是因为修改的是 student 对象的 age 属性,即:修改的是 同一个对象,所以新值、原值是同一个值

执行下面代码:

student.value = {
    age:'20',
    password:'123456'
}

是给 student 赋值新对象,即:两个对象—新对象、原对象,所以 newValue、oldValue 是不同的


原文出处:/show_1GW3ggaOgM1y.html