Vue---组合式API - computed

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

<script setup>
// 导入
import {ref, computed } from 'vue'
// 原始数据
const count = ref(0)
// 计算属性
const doubleCount = computed(()=>count.value * 2)

// 原始数据
const list = ref([1,2,3,4,5,6,7,8])
// 计算属性list
const filterList = computed(item=>item > 2)
</script>

举例：

<script setup>
import { ref, computed } from 'vue'
const goods =   ref([{
  id: 1001,
  price: 5000,
  name: '小米手机'
},
{
  id: 1002,
  price: 4000,
  name: '魅族手机'
},
{
  id: 1003,
  price: 6000,
  name: '三星手机'
}
])
// 筛选出价格大等于5000的商品 
const filterGoods = computed(()=> {
   return goods.value.filter(item => item.price >= 5000)
})
<template>
  <p>{{ filterGoods }}</p>
</template>

完整写法与完整写法简写

const fullName = computed({
  //  get: function() {} 与 get() {}等价
  // get: ()=> {} 如果是箭头函数，不可以省略箭头函数
  get(){  相等于//get:()=>{}
    console.log(1111);
    return firstName.value + lastName.value
  },
  set(newV){
    firstName.value  = newV.substring(0,1)
    lastName.value  = newV.substring(1)
  }
})

简写

 //只提供get 
const fullName = computed(()=>{
 return  firstName.value + lastName.value
})