计算属性（computed）

一、computed的优点

1.具有缓存机制

当响应式依赖不发生改变的情况下，无论调用多少次，都只计算一次，而不重新调用getter函数，避免了重复计算

2.响应式更新

当依赖的响应式数据发生变化时，computed会自动更新

3.简化模板的运算逻辑

简化了直接在模板中使用js运算逻辑的操作，使代码分离，有利于后期维护

二、computed VS 方法(methods)

methods方法不具有缓存的能力，每次调用都会重新计算一次，computed计算属性具有缓存能力

三、computed VS 侦听器(watch)

使用computed时，getter函数的职责主要是计算和返回该值，不应该在getter里发异步请求或者更改Dom的操作，即不应有副作用

使用watch时，可以在被监听的数据发生变化时促发副作用，即发起异步请求或者获取Dom等操作

四、computed的使用(两种不同的传参方式)

1.接收一个getter函数

import { computed, ref } from "vue";
const data = ref([
  {
    name: "张三",
    age: 16,
    height: 170,
  },
  {
    name: "李四",
    age: 19,
    height: 175,
  },
  {
    name: "王五",
    age: 22,
    height: 180,
  },
]);

const newData = computed(() => {
  const dataFilter = data.value.filter((item) => item.age > 18);
  return dataFilter;
});

2.接收一个对象(可以修改computed)

import { computed, ref } from "vue";
const data = ref([
  {
    name: "张三",
    age: 16,
    height: 170,
  },
  {
    name: "李四",
    age: 19,
    height: 175,
  },
  {
    name: "王五",
    age: 22,
    height: 180,
  },
]);

const newData = computed({
  get: () => {
    const dataFilter = data.value.filter((item) => item.age > 18);
    return dataFilter;
  },
  set: (val) => {
    data.value = val;
  },
});

通过设置setter函数接收comouted改变的值并赋值上去，但应当避免此操作，计算属性的返回值应该被视为只读的，应该更改相应依赖的数据来促发computed的重新计算