watch监视reactive对象类型数据

最新推荐文章于 2025-11-21 22:15:40 发布

原创最新推荐文章于 2025-11-21 22:15:40 发布 · 164 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue3 专栏收录该内容

34 篇文章

订阅专栏

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对象属性的时候，新值和旧值是一样的，很简单，因为它们是同一个对象，对象本身并没有改变，我们并没有创建一个新的对象出来，所以新值和旧值都一样