vue计算属性 computed

计算属性 computed

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

<template>
<h3>计算属性</h3>
<hr>
<p>姓名：{{A.name}}</p>
<p>计算属性--技能个数是否大于零：{{isContent}}</p>
</template>
<script>

export default{

data(){
    return{
A:{
    name:"张三",
content:["html","css","js","vue"],
}
    }
},
//计算属性
computed:{
    isContent(){
    return this.A.content.length > 0 ? "Yes" : "No";
}
}

}

</script>

计算属性computed的方法调用不需要添加小括号，method里面的方法可加小括号也可不加。

运行结果：

计算属性VS方法
可能你会发现在表达式中调用一个函数也会获取和计算属性一样的结果。

<template>
<h3>计算属性</h3>
<hr>
<p>姓名：{{A.name}}</p>
<p>计算属性--技能个数是否大于零：{{isContents()}}</p>
</template>
<script>

export default{

data(){
    return{
A:{
    name:"张三",
content:["html","css","js","vue"],
}
    }
},
//计算属性
computed:{
    isContent(){
    return this.A.content.length > 0 ? "Yes" : "No";
},
},
methods:{
    isContents(){
        return this.A.content.length > 0 ? "Yes" : "No";
    }
}
}

</script>

运行结果：

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