computed函数的使用

一、computed函数

1、作用：创建计算属性，用于根据其他属性的值进行计算，并自动更新计算结果。它可以提高代码的可读性和性能。

2、使用步骤

（1）导入computed函数

（2）执行函数在回调参数中return基于响应式数据做计算的值，用变量接收

代码如下（示例）：

<script setup>
//1、导入computed函数
import { ref, computed } from 'vue'
const list = ref([1, 2, 3, 4, 5, 6])    //原始响应式数组list

//2、执行函数 return计算之后的值 变量接收
const computedList = computed(() => {
    return list.value.filter(item => item > 2)
})
</script>
<template>
    <div>
        原始响应式数组--{{ list }}
    </div>
    <br>
    <div>
        计算属性数组--{{ computedList }}
    </div>
</template>

 这里导入computed计算属性函数，用filter方法，对list中的每个元素进行过滤，回调函数 item => item > 2 表示只保留大于2的元素。然后定义一个computedList接收返回值的变量
  需要注意的是， computed 函数中的代码不应该有副作用，即不应该修改响应式数据或进行异步操作。如果需要进行副作用操作，应该使用 watch 或 watchEffect 函数。

总结

computed函数：

• 导入computed函数；
• 执行函数在回调参数中return基于响应式数据做计算的值，用变量接收