ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

vue3 之 组合式API—computed

2026/10/6 1:01:16 拓冰建站 浏览量
vue3 之 组合式API—computed
computed计算属性函数

计算属性基本思想和Vue2的完全一致,组合式API下的计算属性只是修改了写法

核心步骤:

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

在这里插入图片描述
在这里插入图片描述

```vue
<script setup>
// 1.导入computed
import {ref, computed } from 'vue'
// 原始数据
const list = ref([1,2,3,4,5,6,7,8])
// 2.执行函数return计算之后的值 变量接收
const computedList = computed(()=>{return list.value.filter(item=>item>2)
})setTimeout(()=>{list.value.push(9,10)
},3000)</script>
<template><div>原始响应式数组 —— {{list}}</div><div>计算属性数组 —— {{computedList}}</div>
</template>