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

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

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

案例截图

目录结构

代码

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>