每日鸡汤:所有真实的快乐,都来自很久的努力
前言
本篇文章学习 【计算属性】
一、使用场景
使用的语法,基本没什么难度,官网信息已经很详细,简单来说一下我在项目中遇到的,关于计算属性的使用场景吧,仅供参考
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
})
总结
总之,计算属性的使用场景大同小异,自己用多了,体会一下就可以了。