Vue3【十四】watchEffect自动监视多个数据实现，不用明确指出监视哪个数据

Vue3【十四】watchEffect自动监视多个数据实现，不用明确指出监视哪个数据
进入立即执行一次，并监视数据变化

案例截图

WatchEffact自动监视数据

目录结构

在这里插入图片描述

代码

Person.vue

<template><div class="person"><h1>WatchEfact自动监视多个数据</h1><h2>需求:转速大于2000时候换挡位,不能超过D6挡位</h2><h2>转速：{{ car.speed }}</h2><h2>挡位：{{ car.level }}</h2><button @click="changeSpeed">加油门</button><button @click="changeLevel">加挡位</button></div>
</template><script lang="ts" setup>
import { ref, reactive, watch, watchEffect } from 'vue';
let levels = ['P', 'R', 'N', 'D1', 'D2', 'D3', 'D4', 'D5', 'D6']
let level = ref(0)
let car = reactive({speed: 0,level: 'P'
})
function changeSpeed() {car.speed += 300
}
function changeLevel() {car.level = levels[level.value += 1]
}// 监视 watchEffect自动监视多个数据实现，不用明确指出监视哪个数据
watchEffect(() => {if (car.speed > 2000) {if (car.level === 'D6') {alert('不能超过D6挡位')} else {car.level = levels[level.value += 1]}car.speed = 1000}// 挡位最高D6挡位 if (level.value >= 9) {alert('不能超过D6挡位')}})
</script><style scoped>
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}button {margin: 0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
</style>