Vue3+Vite+TypeScript+element Plus框架搭建过程（4）—响应式代码演示

最新推荐文章于 2025-08-29 04:35:48 发布

原创最新推荐文章于 2025-08-29 04:35:48 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 #typescript #响应式 #选项式 #组合式

前端专栏收录该内容

46 篇文章

订阅专栏

本文探讨了Vue3中的setup和传统的options API在创建响应式属性方面的差异。setup语法简洁，不易报错，而options API虽然代码量大但属性天生响应式。在VSCode中，options API可能会遇到属性识别问题。推荐使用setup，通过ref包裹变量实现响应式，并通过 computed 处理依赖。点击按钮修改firstName的值，fullName也会相应更新。

代码地址，分支reactivity：https://gitee.com/lsjWeiYi/vue3-frame/tree/reactivity/

本篇主要是搞明白了vue3 setup和传统的vue3的响应式属性如何编写。

官方关于响应式的文档
这里注意左上角，官方提供了两种api风格：
在这里插入图片描述

选项式

-选项式就是vue2主流的export default的方式
我们这里的代码是这样的：

<script lang="ts">
    export default {
        data() {
            let firstName: string = "Foot";
            let lastName: string = "Ball";
            return {
                firstName,
                lastName,
            };
        },
        computed: {
            fullName: function (): string {
                return this.firstName + " " + this.lastName;
            },
        },
        methods: {
            change: function () {
                console.log(this.firstName);
                this.firstName = "1";
            },
        },
    };
</script>

这种风格的代码格式清晰，但是代码量很大。
但是这种方案的data中的属性都是响应式的，属性被赋值变化的话，页面上的属性会跟着变化。
但是，在vscode下有一个问题：
在这里插入图片描述
会报错，因为这种形式属性定义不再方法内，无法识别。但实际上功能是正常的，是vs code下语法检测不完善，暂时找不到解决办法。

组合式

vue3推出的方式，貌似未来也更流行这种方式

<script setup lang="ts">
    import { ref, Ref, computed } from "vue";
    let firstName: Ref<string> = ref("Foot");
    let lastName: Ref<string> = ref("Ball");
    const fullName = computed(() => firstName.value + " " + lastName.value);
    function mychange() {
        firstName.value = firstName.value + "1";
    }
</script>

可以看到，代码短了很多，更符合我们脚本编程的那种感觉。对比上面目前最大的优势是不会报错，变量能正确识别。。。

但是也有缺点，传统方式定义的变量不是响应式的，无法和页面形成联动，也就是修改这些变量的值无法触发computed，界面也不会更新。解决方法是用ref，所以可以看到上面都用ref包围了。与此同时，取值的时候，要用firstName.value的形式。但是template中不需要使用.value取值，它自己会识别。

就目前而言，还是推荐这种方法。

PS：组合式api下的ts的类型标注

完整代码：

<script setup lang="ts">
    import { ref, Ref, computed } from "vue";
    let firstName: Ref<string> = ref("Foot");
    let lastName: Ref<string> = ref("Ball");
    const fullName = computed(() => firstName.value + " " + lastName.value);
    function mychange() {
        firstName.value = firstName.value + "1";
    }
</script>
<template>
    <h1>{{ fullName }}</h1>
    <h1>{{ firstName }}</h1>
    <el-button @click="mychange">改变这个标题</el-button>
</template>