Vue的计算属性

1.什么是计算属性？

它是一种属性，有计算这个特殊的性质，每次取得它的值的时候，它不像普通属性那样直接返回结果，而是经过计算后再返回结果，同时只要在它的当中引用data中的某个属性，当这个data中的属性发送改变时，计算属性会自动计算重新执行。

2.用法

计算属性需要以function函数的形式声明到组件的computed选项中，要使用时必须写它的名称（当作一个属性来用），示例如下

<template>
  <div>
    <input type="text" v-model.number="count" />
    <p>{{ plus }}</p> 
  </div>
</template>

<script>
export default {
  name: 'MyCounter',
  data() {
    return {
      count: 1,
    }
  },
  computed: {
    plus() {
      console.log('计算属性被执行了')
      return this.count * 2
      // 计算属性侧重于得到一个计算的结果，因此计算属性中要有return返回值
    },
  },
}
</script>

3.计算属性缓存 vs 方法

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

<template>
  <div>
    <input type="text" v-model.number="count" />
    <p>{{ count }} 乘以 2 的值为：{{ plus }}</p>
    <p>{{ count }} 乘以 2 的值为：{{ plus }}</p>
    <!-- 上面两行代码只执行第一个,打印一次"计算属性被执行了"，只有当data中与之相关的依赖项发生变化时（如count发生改变）才会继续执行 -->
    <p>{{ count }} 乘以 2 的值为：{{ plus() }}</p>
    <p>{{ count }} 乘以 2 的值为：{{ plus() }}</p>
    <!-- 上面两行代码都会被执行,打印两次"方法被执行了" -->
  </div>
</template>

<script>
export default {
  name: 'MyCounter',
  data() {
    return {
      count: 1,
    }
  },
  computed: {
    plus() {
      console.log('计算属性被执行了')
      return this.count * 2
      // 计算属性侧重于得到一个计算的结果，因此计算属性中要有return返回值
    },
  },
  methods: {
    plus() {
      console.log('方法被执行了')
      return this.count * 2
    }
  }
}
</script>

<style></style>

相对于方而言，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算，因此计算属性的性能更好。

注意：

1.计算属性必须定义到computed节点中

2.计算属性必须必须是一个function函数

3.计算属性必须有返回值

4.计算属性必须当作普通属性使用