computed计算属性

计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

函数形式

<template>
   <div>{{ obj.name }}</div>
   <div>{{ obj.age }}</div>
   <div>{{ age }}</div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue';
let obj = reactive({
   name: '张三',
   age: 18
});
let age = computed(() => {
   return '今年：' + obj.age;
});
obj.age++;
</script>

对象的形式

<template>
   <div>{{ obj.name }}</div>
   <div>{{ obj.age }}</div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue';
let obj = reactive({
   name: '张三',
   age: 18
});
let age = computed({
   get: () => {
      return obj.age;
   },
   set: (newVal) => {
      obj.age = newVal;
   }
});
obj.age++;
</script>