watch监视特定属性
watch监视特定属性
前置代码
<template><div class="person"><h2>{{ ItShare.name }}</h2><h2>{{ ItShare.day }}</h2><h2>{{ ItShare.title.t1 }},{{ ItShare.title.t2 }}</h2><button @click="ChangeName">修改名字</button><button @click="ChangeDay">修改天数</button><button @click="ChangeT1">修改标题1</button><button @click="ChangeT2">修改标题2</button><button @click="ChangeT">修改整个标题</button></div>
</template><script lang="ts" setup>
import { reactive } from 'vue';let ItShare = reactive({name: "IT知识一享",day: 365,title: {t1:'学习VUE',t2:'掌握VUE'}})function ChangeName() {ItShare.name += '*';}function ChangeDay() {ItShare.day +=1;}function ChangeT1() {ItShare.title.t1 = '熟悉VUE'}function ChangeT2() {ItShare.title.t2 = '精通VUE'}function ChangeT(){ItShare.title = {t1:'VUE大师',t2:'VUE大师+'}}</script><style scoped>.person{background-color: rgb(39, 148, 191);padding-left: 50px;}.btn {display: flex;gap:20px}
</style>
- 这个代码就不作讲解了，已经是非常非常简单的代码了；
Watch监视使用Getter函数某个属性
- 首先我们来最简单的，我们用watch只监视名字的变化
watch(() => ItShare.name,(newValue,oldValue) => {console.log('姓名发生了变化',newValue,oldValue)})
注意事项：
- 回顾一下getter函数，getter函数就是一个专门用来’获取‘对象内部属性值的函数。通俗的说，他是一个函数，返回一个值；
- 在watch监视reactive对象类型属性的时候，旧值和新值是一样的，但是如果监视特定属性的时候，它们一定是不一样的；
- 如果watch属性值不是对象类型的，需要写成函数形式，如果属性值是对象类型，可以直接写，但是建议写函数；
- 那我们在看看监视对象里面的对象类型
watch(ItShare.title,(newValue,oldValue) => {console.log('title发生了变化',newValue,oldValue)})
- 我们发现这里我们没有写函数的形式，但是没有报错，我们试试监视是否是正常的；
我们发现对象里面的属性是可以被监视到的，但是对象本身监视不到，这其实香香也很简单，你监视title，但是你点击修改整个title的时候，title已经不是以前的title了，他地址值已经改变了，所以watch当然监视不到
- 那我们通过函数的方式来试试
watch(() => ItShare.title,(newValue,oldValue) => {console.log('title发生了变化',newValue,oldValue)})
- 现在我们发现对象里面的属性变化watch监视不到了，但是对象本身的变化可以被监视到，这个相信大家一猜就猜到了，因为我们现在监视的就是对象本身，如果我们像监视到对象内部的属性，我们应该开启深度监视；
watch(() => ItShare.title,(newValue,oldValue) => {console.log('title发生了变化',newValue,oldValue)},{deep: true})
现在就可以全部监视到了，所以当我们像监视对象类型的某个属性的时候，不管这个属性是基本类型的还是对象类型的，最佳实践我们都应该使用getter函数的形式来书写