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

最新推荐文章于 2024-05-30 11:27:58 发布

hamimelon2020

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量471

点赞数

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

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

版权

vue 专栏收录该内容

722 篇文章 4 订阅

订阅专栏

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