vue学习笔记9-计算属性

如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此更推荐用计算机属性来描述依赖响应式状态的复杂逻辑

以下代码通过<h3>{{ bilibili.name }}</h3>让下面的元素显示在UI上

<template>
    <h3>{{ bilibili.name }}</h3>
    <!-- 通过判断数组长度，判断里面是否有内容 -->
    <p>{{ bilibili.content.length > 0 ? 'yes' :'no' }}</p>
</template>
<script>
export default {
    data(){
        return{
            bilibili:{
                name:"我爱看动漫",
                content:["番剧","美漫","国漫"]
            }
        }
    }
}
</script>

🆗成功显示

    <p>{{ bilibili.content.length > 0 ? 'yes' :'no' }}</p>就是其中的复杂逻辑

为简化程序使用计算属性

<template>
    <h3>{{ bilibili.name }}</h3>
    <p>{{ bilibiliContent }}</p>
    <!-- 通过判断数组长度，判断里面是否有内容 -->
</template>
<script>
export default {
    data(){
        return{
            bilibili:{
                name:"我爱看动漫",
                content:["番剧","美漫","国漫"]
            }
        }
    },
    //计算属性
    computed:{
        bilibiliContent(){
            return this. bilibili.content.length > 0 ? 'yes' :'no' 
        }
    }
}
</script>

用methods放函数，效果相同

重点区别：

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