watch监视reactive对象类型数据
watch监视reactive对象类型数据
- 首先呢，我们先将我们上次用ref写的代码改一下，改成用reactive
<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 { reactive, watch } from 'vue';let ItShare = reactive({name: 'IT知识一享',title: '学习VUE'
})function ChangeName() {ItShare.name += '*';
}function ChangeTitle() {ItShare.title = '学习VUE' + '基础';
}function ChangeItshare() {Object.assign(ItShare, {name: 'Itshare',title: '精通VUE'})
}</script><style scoped>.person{background-color: rgb(39, 148, 191);padding-left: 50px;}.btn {display: flex;gap:20px}
</style>
- 现在还像之前写一下监视
watch(ItShare,(newvalue,oldvale) => {console.log('ItShare对象被修改了',newvalue,oldvale);
})
- 我们发现使用reactive定义的对象，无论是对象里面的属性，还是对象本身都可以被监视到；因为watch监视reactive定义的对象类型数据，默认情况下就开启深度监视，并且深度监视无法被关闭；所以我们它可以读取到对象内部属性，也可以读取到对象本身的变化；
- 和watch监视ref对象类型数据一样，当我们监视ref对象属性的时候，新值和旧值是一样的，很简单，因为它们是同一个对象，对象本身并没有改变，我们并没有创建一个新的对象出来，所以新值和旧值都一样
为什么无法关闭深度监视？
reactive的本质就是用于创建深度响应的对象，它本身就会追踪对象所有层级属性的变化，Vue为了确保行为一致性，所以在使用watch监听reactive的数据的时候，会强制进行深度监听，以确保任何嵌套属性的变化都能被捕获到，即使你使用{deep: false},深度监听依然会生效