computed又被称作计算属性,用于动态的根据某个值或某些值的变化,来产生对应的变化,computed具有缓存性,当依赖的值无变化时,不会引起computed声明值的变化
<template>
<div>age:{{ age }}</div>
<div>age_computed_get:{{ age_computed_get }}</div>
<div>age_computed_set:<input v-model="age_computed_set" /></div>
</template>
<script setup>
import { ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
let age = ref(1);
// 用法1。读计算属性
let age_computed_get = computed(() => age.value + 1);
// 用法2。读写计算属性
let age_computed_set = computed({
get() {
return age.value + 1;
},
set(val) {
age.value = val;
},
});
</script>