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

<template>
  <div>
    <h1>Demo8:watch监听ref基本数据类型</h1>
    <h3>我有{{ flower }}朵花</h3>
    <button @click="changeFlower">减少</button>
  </div>
</template>

<script lang="ts" setup>
import {ref,watch} from "vue" 
let flower = ref(20);
function changeFlower() {
    flower.value--;
}
// 监听的是基本数据类型的值
watch(flower,(newValue,oldValue) => {
    console.log(newValue,oldValue)
},{
  deep: true, //开启深度监听
  immediate: true //立即监听
})
</script>

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