w1020/15.vue3/vue_project1/src/components/Demo8.vue

<template>
  <div>
    <div>Watch1.0</div>
    <!-- watch监听ref基本数据类型 -->
    <h3>我送了{{ flower }}花</h3>
    <button @click="sendFlower">再送一朵</button>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref } from "vue";
let flower = ref(10);
function sendFlower() {
    flower.value += 1;
}
/***
 * watch 
 * 1.监听对象
 * 2.回调函数
 * 3.深度监听
 */
watch(flower,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
},{
    deep: true,//开启深度监听
    immediate: true // 立即执行
})
</script>

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