一、computed计算属性函数

image.png image.png

<script setup>
import { computed, ref } from "vue";
// 声明数据
const list = ref([1, 2, 3, 4, 5, 6, 7, 8]);

// 基于list派生一个计算属性，从list中过滤出 > 2
const computedList = list.value.filter((item) => item > 2);
</script>

<template>
  <h1>原list：{{ list }}</h1>
  <h1>计算属性list：{{ computedList }}</h1>
</template>

image.png

二、计算属性的最佳实践

image.png