Vue中的Computed计算属性

computed计算属性主要用于对已有数据进行重新计算，计算完成之后会把计算后的数据存入缓存，在下次进行调用的时候，会先对比一下数据有没有变化，如果说没有变化的话，就会直接从缓存内读取出来数据，避免重复计算，浪费性能。当然计算数据也可以通过函数进行操作，只不过函数的话会在每一次调用的时候，无论计算的数据有没有变化，都会对已有数据进行重新计算，相比之下，函数会比computed开销更大。

实例

<template>
<h1>{{ title }}</h1>
<p>我这里需要插入一个需要计算的属性 {{ computedData }}</p>
</template>
<script>
export default {
    data() {
        return {
            title: 'vue计算属性',
            initValue: 5
        }
    },
    computed: {
        computedData() {
            return this.initValue * 5
        }
    }
}
</script>