Vip4.0W/12.vue3/project1/src/components/Demo9.vue

<template>
  <div>
    <h1>Demo9:watch监听ref引用数据类型</h1>
    <h3>我有{{ flower.type }}花,是{{ flower.color }}</h3>
    <button @click="changeFlowerColor">颜色</button>
    <button @click="changeFlower">整体</button>
  </div>
</template>

<script lang="ts" setup>
import {ref,watch} from "vue" 
let flower = ref({
  color:"红色",
  type:"牡丹"
});
function changeFlowerColor() {
  flower.value.color = '粉色'
}
function changeFlower() {
  flower.value = {type:"丁香花",color:"紫色"}
}
// 监听的是基本数据类型的值
watch(flower,(newValue,oldValue) => {
    console.log(newValue,oldValue)
},{
  deep: true,
  immediate: true
})
</script>

<style lang="scss" scoped>
</style>