watch的一个完美的例子，有基本数据类型，也有引用数据类型

最新推荐文章于 2024-08-22 14:32:34 发布

hamimelon2020

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量483

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_40945354/article/details/128428497

版权

vue 专栏收录该内容

722 篇文章 4 订阅

订阅专栏

该篇博客介绍了Vue.js3中使用ref和reactive进行数据管理，并通过watch监听基础数据类型和引用数据类型的改变。在实例中展示了如何在1秒和2秒后分别修改message和data.name，并在控制台打印变化。此文章深入解析了Vue的响应式机制及数据监听技巧。

摘要由CSDN通过智能技术生成

<template>
  <div>
<div>Message is: {{ message }}</div>
<div>data.name is: {{ data.name }}</div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
const message = ref('Hello');

const data = reactive({
  name: "React 管理后台"
})

watch(message, (newMessage, prevMessage) => {
  console.group('监听基础数据类型');
  console.log(newMessage)
  console.log(prevMessage)
})

setTimeout(() => {
  message.value = 'Hello World!'
},1000)

watch(() => data.name, (newName, prevName) => {
  console.group('监听引用数据类型');
  console.log(newName)
  console.log(prevName)
})

setTimeout(() => {
  data.name = "Vue.js 3 管理后台"
}, 2000)
</script>