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
})

这样我们就能知道我们内部属性一开始的值了;其实在实际开发的情况下,大多数的情况我们都不会去关系旧的值