【vue3】05. 跟着官网学习vue3

每日鸡汤：所有真实的快乐，都来自很久的努力

前言

本篇文章学习 【计算属性】

---

一、使用场景

使用的语法，基本没什么难度，官网信息已经很详细，简单来说一下我在项目中遇到的，关于计算属性的使用场景吧，仅供参考

1. 数据格式化

假设有接口返回的，日期的数据字段createDate，我们要将这个字段渲染到模版上，那么我们可以使用计算属性，使用计算后的值渲染模版

const res = computed(()=> {
    return formatDate(createDate) // 假设你有一个用来格式化时间的函数formatDate
})

2. 模版中使用object某个属性时

假设，你在vuex 中存放了一个object类型的userInfo字段

const userInfo = {
    username: 'my name',
    age: 12,
}

现在，在头像组件中需要单独显示用户名，你就没有必要在模版中写 【userInfo.usename】，直接这样写的话，如果userInfo为空，就会报错！！所以你不如用计算属性，也排除了会报错的情况。

const username = computed(()=> {
    return userInfo.username || ''
}}

3.获取数组的长度

这个场景很常用，list.length，如果在某个地方频繁用到，可以直接使用计算属性，代码会变得更简洁。

4.动态展示的菜单

  有一个组件功能【查看列表、帮助、升级】要求只有在非会员的时候展示【升级】菜单，而你用for循环在模版中渲染了菜单，那么你可以使用computed计算用于渲染的数组

const isVip = ref(false)
const menu = computed(() => {
    const arr = ['查看列表', '帮助'] 
    if(isVip) {
        arr.push('升级')
    }
     
    return arr
})

 5. 获取store里的值

假设你使用vuex存了不少数据，那么获取store里面的值使用computed属性是最佳选择，因为store 可能会被其他组件更新，随意需要动态取值

// 假设根据存在store里面的用户信息的token的判断是否是登录状态
const store = useStore()
const isLogin = computed(()=> {
    return store.state.userInfo?.token || false
})

---

总结 

总之，计算属性的使用场景大同小异，自己用多了，体会一下就可以了。