【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
})总结
总之，计算属性的使用场景大同小异，自己用多了，体会一下就可以了。