用vue3写花房温度、湿度监控报警。 1、数据郁金香对象,属性:温度、湿度2、两个按钮:温度+5，湿度+5 53、侦听温度和湿度的变化，当温度低于5摄氏度或高于20摄氏度，发出警报（控制台输出) 当湿度低于e摄氏度或高于50，发出警报（控制台输出)

在 Vue3 中，你可以使用 Composition API 和自定义事件来实现这个功能。首先，创建一个组件，定义数据结构和状态：

<template>
  <div>
    <p>当前温度: {{ temperature }}℃</p>
    <p>当前湿度: {{ humidity }}%</p>
    <button @click="increaseTemperature">温度+5</button>
    <button @click="increaseHumidity">湿度+5</button>
    <span v-if="isTemperatureAlert" class="alert">温度警告！</span>
    <span v-if="isHumidityAlert" class="alert">湿度警告！</span>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const temperature = ref(15);
const humidity = ref(40);
let isTemperatureAlert = false;
let isHumidityAlert = false;

function increaseTemperature() {
  if (temperature.value >= 20) {
    console.log('温度过高警告！');
    isTemperatureAlert = true;
  } else {
    temperature.value += 5;
  }
}

function increaseHumidity() {
  if (humidity.value <= 30 || humidity.value >= 50) {
    console.log('湿度异常警告！');
    isHumidityAlert = true;
  } else {
    humidity.value += 5;
  }
}
</script>

<style scoped>
.alert {
  color: red;
}
</style>

在这个例子中，我们定义了 `temperature` 和 `humidity` 作为 Vue 的响应式变量，并通过 `increaseTemperature` 和 `increaseHumidity` 函数实时更新它们并检查是否触发警报。当温度超过20°C或湿度不在30%-50%范围内时，会分别在控制台输出警告信息，并显示在页面上。