计算属性（computed property）

HTML页面上的类似{{userName}}这样的，就是模板语法，这里面除了显示某个字段以外，也可以使用JavaScript表达式，例如：

结果：{{ eduBg < 99 edubg> 0 ? "通过":"未通过" }}

但是Vue是不建议在模板语法中写太多逻辑的，后期维护是问题。

采用计算属性来处理复杂逻辑是Vue推荐的。

<script lang='ts' setup name='Applicant'>
import { ref, computed } from 'vue';
let eduBgs = [{ value: 0, text: "请选择" }, { value: 1, text: "博士" }, { value: 2, text: "硕士" }, { value: 3, text: "本科" }, { value: 99, text: "大专" }]

let userName = ref("");
let eduBg = ref(0);

//计算属性
let canSubmit = computed(() => {
    return checkCanSubmit()
})

function checkCanSubmit() {
    return eduBg.value > 0 && userName.value.length > 0
}

function submit() {
    let eduBgText = eduBgs.find(item => item.value === eduBg.value)?.text
    alert(userName.value + " 先生/女士，学历：" + eduBgText + " 已提交")
}
</script>

canSubmit就是计算属性。当其依赖的userName、eduBg发生改变时，canSubmit也会重新计算并更新。

其实计算属性，逻辑也可以写在function中，模板直接调用即可，也能达到相同的效果。

但是相比计算属性，直接用方法是没有缓存的。

假设页面有三处用到canSubmit，如果用function，会计算3次，如果用计算属性，只需1次。

可修改的计算属性

按照上面的写法，如果我们想直接修改计算属性，例如：

canSubmit.value=true

是不行的，会报此属性是只读的。可读可写的写法：

强制默认提交

// 计算属性 可读可写
let canSubmit = computed({
    get() {
        return checkCanSubmit()
    },
    set(newVal) {
        userName.value = "佚名"
        eduBg.value = 99
    }
})

function forceSubmit() {
    canSubmit.value = true
}