Vue3_2024_7天【回顾上篇watch常见的后两种场景】___续

Vue3中监听多条数据的两种使用

1.watch【使用上一章写法，监听两个属性，然后执行相应操作…】

2.watchEffect【相对于使用watch，watchEffect默认页面初始加载，有点类似加配置：立即执行 immediate】

代码：

<template>
  <div style="background-color: #eeeeee;">
  <div>当前水温 {{water_wen}} （单位 / 摄氏度）</div>
  <div>当前水位 {{water_height}}（单位 / 米）</div>
  </div>
  <div style="display:flex; ;">
    <button @click="updateWater_wen()">修改-水温 </button>
    <button @click="updatewater_height()">修改-水位</button>
  </div>
</template>
<script name="Greg_05"></script>

<script setup lang="ts">
import {ref,watch,watchEffect} from 'vue';
let water_wen=ref(10);
let water_height=ref(0);

//修改
function updateWater_wen(){
  water_wen.value+=10
}
function updatewater_height(){
  water_height.value+=1
}

//监听：水温>60度或水位>20米，则请求接口报警！
//第一种写法：使用watch去监听 
// watch([water_wen,water_height],(newVal,oldVal)=>{
//   console.log("水温或水位变化了",newVal,oldVal)
//   let [new_water_wen,new_water_height] =newVal;
//   if(new_water_wen>60||new_water_height>20){
//     console.log("开始报警......");
//   }
// })
//第二种：不用告诉它监听谁，它会自己去判断 ,页面初始上来即执行，类似给watch配置indes立刻执行
watchEffect(()=>{
  if(water_wen.value>60||water_height.value>20){
    console.log("开始报警......");
  }
})

</script>

<style>
</style>