计算属性

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

xxxxxxxxxx
<template>
    <div>
        <h3>{{ itbaizhan.name }}</h3>
        <p>{{ itbaizhan.content.length > 0 ? 'Yes' : "No" }}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            itbaizhan:{
                name:"百战程序员",
                content:["前端","Java","python"]
            }
        }
    }
}
</script>

应用计算属性

xxxxxxxxxx
<template>
    <div>
        <h3>{{ itbaizhan.name }}</h3>
        <p>{{ getReadBook }}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            itbaizhan:{
                name:"百战程序员",
                content:["前端","Java","python"]
            }
        }
    },
    computed:{
        getReadBook(){
            return this.itbaizhan.content.length > 0 ? 'Yes' : "No"
        }
    }
}
</script>

计算属性缓存 vs 方法

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

xxxxxxxxxx
<template>
    <div>
        <h3>{{ itbaizhan.name }}</h3>
        <p>{{ getReadBook() }}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            itbaizhan:{
                name:"百战程序员",
                content:["前端","Java","python"]
            }
        }
    },
    methods:{
        getReadBook(){
            return this.itbaizhan.content.length > 0 ? 'Yes' : "No"
        }
    }
}
</script>

重点区别：

计算属性：计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算

方法：方法调用总是会在重渲染发生时再次执行函数

实时效果反馈

1. 下列那个是计算属性关键字：

A data

B methods

C computed

D vue

答案

1=>C