代码地址,分支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取值,它自己会识别。
就目前而言,还是推荐这种方法。
完整代码:
<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>
效果:
点击按钮,修改的是firstName的值,但是能触发fullName 的更新: