vue3 之组合式API—computed

最新推荐文章于 2024-03-17 20:00:00 发布

jiojio冲冲冲

最新推荐文章于 2024-03-17 20:00:00 发布

阅读量538

点赞数 2

分类专栏： vue3 文章标签： vue3 vue vue.js

本文链接：https://blog.csdn.net/weixin_42268006/article/details/136007143

版权

vue3 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

本文介绍了在Vue3中使用ScriptSetup语法实现计算属性的方法，与Vue2相比，虽然写法有所变化，但核心是基于响应式数据进行计算并返回新的值。示例展示了如何导入computed函数并使用它过滤数组。

摘要由CSDN通过智能技术生成

computed计算属性函数

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

核心步骤：

导入computed函数
执行函数在回调参数中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>