Vue2教程 - 9 计算属性

例如我们现在有一个需求，输入 firstName 和 lastName，然后拼接出结果，得到 fullName。

那么可能编写代码如下：

<!-- 结构 -->
<template>
  <div id="root">
    <div>
      firstName:<input type="text" v-model="firstName">
    </div>
    <div>
      lastName:<input type="text" v-model="lastName">
    </div>
    <div>
      fullName:{{ firstName }} {{ lastName }}
    </div>
  </div>
</template>

<!-- 脚本 -->
<script>

export default {
  name: 'App',
  data() {
    return {
      firstName: '',
      lastName: ''
    }
  }
}
</script>

效果如下：

如果想要通过 firstName 和 lastName 经过某些处理后，得到一个结果，例如将首字母大写。有些操作可能通过差值表达式可以完成，但是将这些逻辑写在模板里，不是好的设计。这个时候，我们可以使用计算属性 computed 。

举个栗子：

和定义 data、methods 一样，computed 也是模板中的一个选项，然后在 computed 中定义计算属性。

<!-- 结构 -->
<template>
  <div id="root">
    <div>
      firstName:<input type="text" v-model="firstName">
    </div>
    <div>
      lastName:<input type="text" v-model="lastName">
    </div>
    <div>
      fullName:{{ fullName }}
    </div>
  </div>
</template>

<!-- 脚本 -->
<script>

export default {
  name: 'App',
  data() {
    return {
      firstName: '',
      lastName: ''
    }
  },
  computed: {  // 定义计算属性
    'fullName': function () {
      console.log('ok')
      // 截取字符串，然后拼接返回，得到的结果是firstName首字母大写
      return this.firstName.slice(0, 1).toUpperCase() + this.firstName.slice(1) + " " + this.lastName
    }
  }
}
</script>

定义的计算属性的本质就是一个方法，只不过我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用的，并不会把计算属性，当作方法去调用。在计算属性的函数中，需要将最终的值return出去。

只要计算属性的 function 内部所用到的任何data中的数据发送了变化，就会立即重新计算这个计算属性的值。

计算属性的求值结果会被缓存起来，方便下次直接使用；如果计算属性方法中的所有数据都没有发生过变化，则不会重新对计算属性求值。