【vue3入门】-【12】计算属性

计算属性

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

<template>
    <h3>计算属性</h3>
    <h3>{{ itaj.name }}</h3>
    <p>{{ itaj.content.length > 0 ? "yes" : "NO" }}</p>

    <!--使用计算属性获取计算后的返回值-->
    <p>{{ itajcontent }}</p>
</template>
<script>
export default {
    data() {
        return {
            itaj: {
                name: "测试",
                content: ["内容1", "内容2", "内容4"]
            }
        }
    },

    // 计算属性
    computed: {
        itajcontent() {
            return this.itaj.content.length > 0 ? "yes" : "no"
        }
    }
}
</script>

methods和computed的区别

computed和methods的区别主要有两个

• 第一个是属性、方法调用。computed是属性调用，在定义函数时以属性的形式调用，
  methods是方法调用，在定义函数时以方法的形式调用，要加()
• 第二个是缓存功能，computed是计算属性，是有缓存的，当它的依赖属性改变的时候，
  才会进行重新计算，如果数据没有改变，它是不会运行的。而methods是方法，没有缓存功能，只要你调用一次，不管数据是否改变，它都是执行。
  所以，性能方面的比较的话，computed是比methods的性能会好一点，避免重复执行。

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9