前端流行框架Vue3教程：5. 计算属性

5. 计算属性

（1）计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护，因此我们推荐使用计算属性依赖响应式状态的复杂逻辑

假设，我们判断，一个数组里是否有数据，之前我们是这么写：

<script>
export default{
    data(){
        return{
           itzhangsan:{
               name:'张三',
               content:['前端','Python','Java']
           } 
        }
    }
}
</script>
<template>
    <h3>{{ itzhangsan.name }}</h3>

	<!-- 输出数组长度,若数组长度大于0则输出yes,否则输出no -->
    <p>{{ itzhangsan.content.length >0 ? 'yes':'no'}}</p>

</template>

如果上面逻辑太多的话，会让模板变得臃肿。所以我们用计算属性。

当然，我们用函数也可以实现：

methods:{
        itzhangsanContents(){
            //当itzhangsan.content数组长度大于0时,返回yes,否则返回no
            return this.itzhangsan.content.length >0 ? 'yes':'no'
        }
    }

（2）计算属性缓存 VS 方法

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果

重点区别：
计算属性：计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算
方法：方法调用总是会在重渲染发生时再次执行函数