Why
- 计算属性在
Vue里面还是特别常见的，正好学习到了，记录一下。
How
- 在最新的语法中，可以直接使用关键字
computed，本身就是一个函数，以下是简单的举例。
<script lang="ts" setup>
import { ref } from 'vue';
import { computed } from 'vue';
let msg = ref({
name: "Test",
age: 18,
phone: 1515,
address: "湖北省武汉市"
})
function changePhone() {
msg.value.phone = 4545;
}
function changeName() {
msg.value.name = "454545";
}
function changeAge() {
msg.value.age += 1;
}
let firstName = ref("");
let lastName = ref("");
let fullName1 = computed(() => {
return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value;
})
const fullName = computed({
get() {
return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value;
},
set(val) {
let arr = val.split('-');
firstName.value = arr[0].slice(0, 1).toLowerCase() + arr[0].slice(1);
lastName.value = val.split('-')[1]
}
}
)
function changeFullName() {
fullName.value = "Li-si";
}
function getFullname() {
console.log(firstName.value, lastName.value);
return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value;
}
</script>
<template>
<div>
<input type="text" placeholder="姓" v-model="firstName" />
<br />
<input type="text" placeholder="名" v-model="lastName" />
<br />
全名:<span>{{ fullName }}</span><br />
全名1:<span>{{ getFullname() }}</span>
<br />
<button @click="changeFullName">修改全名</button>
</div>
</template>
<style scoped></style>
- 上述演示了两种方法，其中
fullName1是只有get属性的，无法在后续对它进行赋值操作。如果想要赋值操作，则需要按照fullName写。（其实很类似C#的属性的写法，比较容易理解）
- 其中
v-model表示的是双向绑定，如果是使用:value的话，页面的数据变化是没办法传递到代码的。
- 计算属性是存在缓存的，也就是当页面元素不变化的时候，如果调用多次计算属性的时候其实只有一次的计算。但是如果是函数的话，例如
getFullname，则是有多少次就调用函数多少次，这在性能上面其实是很关键的。
- 字符串的分割操作
slice，我还是第一次使用。。。。
Tips
- 某些方面真的感觉
vue比C#更便利一些。
