我为什么受不了vue3

就说说vue3吧

一、

首先就是vue3提倡的ref

为了快速开发，常常会将事件处理逻辑直接写在html标签的@click属性里面

<template>
    <div @click="() => {some= '123'}"></div>
</template>
<script setup>
import { ref } from "vue";
const some = ref("");
</script>

随着需求的增涨@click事件中的逻辑会越来越多

<template>
    <div @click="() => {
        const str = '1'
        if(str === '1') {
            some = '123'
        } else if(str = '2') {
            some = '456'
        } else {
            some = '....'
        }
    }"></div>
</template>

<script setup>
import { ref } from "vue";
const some = ref("");
</script>

需要把@click事件中的逻辑移动到别处

<template>
    <div @click="() => { changeSome() }"></div>
</template>

<script setup>
import { ref } from "vue";
const some = ref("");

function changeSome() {
    const str = '1'
    if (str === '1') {
        some = '123'
    } else if (str = '2') {
        some = '456'
    } else {
        some = '....'
    }
}
</script>

changeSome无法执行，你需要给每一个some都增加some.value

如果哪天要简化逻辑迁移回去，又需要给每个some去掉.value

这一点非常烦人

如此，不得不统一使用 reactive()

这种为了运行效率而牺牲编码效率的行为，非常不好👎