Vue3 Computed 计算属性应用介绍

一：Computed 介绍

1.简化代码，直接计算得出想要使用的数据

2.计算属性只在相关响应式依赖发生改变时它们才会重新求值。如果响应式数据发生变化，则计算属性会依据它所依赖的数据进行重新计算

3.计算属性是有缓存机制的

4.接收计算属性结果的变量可以直接在HTML模板中通过插值语法使用

二：Computed 使用

1.组合式API注册 computed 方法

import { defineComponent, computed, onMounted, watch } from 'vue'

2.computed 方法接收一个回调函数，回调函数中书写计算数据的逻辑，然后 return 返回计算后的数据

export default defineComponent({
  name: "ColumnList",
  props: {
    list: {
      // 使用 PropType 使得构造函数数据类型断言为自定义接口数据类型
      type: Array as PropType<ColumnProps[]>,
      required: true,
    },
  },
  setup(props) {
    // 计算 props 接收的数据
    const columnList = computed(() => {
      return props.list.map((column) => {
        if (!column.avatar) {
          column.avatar = require("@/assets/avatar.jpg");
        }
        return column;
      });
    });
    return {
      columnList,
    };
  },
});
</script>

3.读取 Vuex 的内容经常使用 computed 属性进行读取，因为 Vuex 的数据是响应式的

const column = computed(() => store.getters.getColumnById(currentId));
const list = computed(()=> store.state.columns;

4.记得 setup 中声明的变量如果想在模板中使用需要 return 出去