vue3中的计算属性computed？

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、computed

computed函数就是指当我们需要一个值，这个值随着其他值的变化而进行变化，我们就可以将其放入computed中，computed是用来定义计算属性的

computed有两个方法，分别是set()和get()。它可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

<template>
  <div>
    <h1>计算属性</h1>
    <hr />
    <button @click="age = 25">点击改变年龄</button>
    <button @click="threeAge = 28">点击改变threeAge年龄</button>
    <div>今年：{{ age }}岁</div>
    <div>明年：{{ nextAge }}岁</div>
    <div>后年：{{ threeAge }}岁</div>
  </div>
</template>

<script>
import { ref, computed } from "vue";
// 计算属性computed：基于现有的数据，计算出一种数据
export default {
  setup() {
    const age = ref(18);
    const nextAge = computed(() => {
      // 在回调函数中必须return，结果就是计算的结果；如果计算依赖属性的数据发生变化，那么就会重新计算
      return age.value + 1;
    });
    // 修改计算属性
    const threeAge = computed({
      get() {
        // 如果读取计算属性的值，默认调用get的方法
        return age.value + 2;
      },
      set(val) {
        // val是计算属性下边传递的实参，如果想要修改计算属性的值，默认调用set方法
        age.value = val - 2;
      },
    });
    return { age, nextAge,threeAge };
  },
};
</script>

<style lang="scss" scoped>
</style>

二、为什么要有computed？

模板中逻辑过重，不易维护，所以使用计算属性computed来简化书写响应式状态的复杂逻辑。

总结

• 计算属性可以直接读取或者修改
• 如果要实现计算属性的修改操作，那么computed的实参应该是对象
• 读取数据触发get方法
• 修改数据触发set方法，set函数的形参就是你赋给他的值