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

<template>
  <div>
    <h1>watch与watchEffect</h1>
    <h3>今天还{{ weather }},温度是{{ temp }}</h3>
    <button @click="changeWeather">修改天气</button>
    <button @click="changeTemp">修改温度</button>
  </div>
</template>

<script lang="ts" setup>
import {ref,watch, watchEffect} from "vue" 
let weather = ref("雪天");
let temp = ref(-10);
function changeWeather() {
    weather.value = '晴天';
}
function changeTemp() {
    temp.value = 20;
}
// watch([weather,temp],(value) => {
//     console.log(value)
// },{
//     deep: true,
//     immediate: true
// })
// 立即执行函数 同时 响应式地追踪其依赖 依赖改变自动更新
watchEffect(()=>{
    console.log(weather.value,temp.value,'watchEffect')
    if(temp.value > 0) {
        alert("天气晴朗")
    }
})
</script>

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