watch监视-ref对象类型数据
watch监视-ref对象类型数据
上次讲解了监视ref基本类型数据,本次我们来学习监视ref对象类型数据
- 预设代码
<template><div class="person"><h2>{{ ItShare.name }}</h2><h2>{{ ItShare.title }}</h2><button @click="ChangeName">修改名称</button><button @click="ChangeTitle">修改标题</button><button @click="ChangeItshare">修改对象</button></div>
</template><script lang="ts" setup>
import { ref } from 'vue';let ItShare = ref({name: 'IT知识一享',title: '学习VUE'
})function ChangeName() {ItShare.value.name += '*';
}function ChangeTitle() {ItShare.value.title = '学习VUE' + '基础';
}function ChangeItshare() {ItShare.value = {name: 'Itshare',title: '精通VUE'}
}
</script><style scoped>.person{background-color: rgb(39, 148, 191);padding-left: 50px;}.btn {display: flex;gap:20px}
</style>
- 这个代码非常的简单,就不多去解释了,我们像watch监视ref基本数据类型一样来写看看是什么效果
watch(ItShare,(newValue,oldValue)=>{console.log('数据变化了',newValue,oldValue);})
- 我们发现当watch监听一个响应式对象的时候,默认只能监听对象本身的引用变化,但是对象内部属性的变化,无法监听,如果我们想监听对象内部属性的变化,就需要开启深度监听
watch(ItShare,(newValue,oldValue)=>{console.log('数据变化了',newValue,oldValue);},
{deep: true
})
</script>
- 这样我们就可以监听对象的内部属性变化了,但是为什么当内部属性改变的时候,我们无法监听到原来的值呢?因为当我们修改完内部属性的时候,本身的对象引用并没有进行改变,当我们读取原来的值的时候,已经改变了,我们已经不知道原来的值了,但是当我们监听整个对象时候,他是两个对象的引用,所以我们都可以读取到;
- 如果我们想要一开始就监听到对象内部属性的原来值,就需要让他立即执行;因为默认情况下,watch是惰性的,第一次创建时不会立即执行监听,只有数据变化的时候才会执行,如果我们需要立即执行的话就可以加上这个参数
watch(ItShare,(newValue,oldValue)=>{console.log('数据变化了',newValue,oldValue);},
{deep: true,immediate: true
})
这样我们就能知道我们内部属性一开始的值了;其实在实际开发的情况下,大多数的情况我们都不会去关系旧的值