vue3 之 组合式API—computed

computed计算属性函数

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

核心步骤:

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

vue3 之 组合式API—computed_第1张图片
vue3 之 组合式API—computed_第2张图片

```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>

你可能感兴趣的:(vue3,vue3,vue,vue.js)