vue.js入门教程之计算属性

下面是关于“vue.js入门教程之计算属性”的完整攻略：

什么是计算属性

计算属性是Vue.js的一个重要特性，它能够对绑定的数据进行计算，然后返回一个新的值。

Vue.js官网对计算属性的介绍：

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message没有发生改变，多次访问计算属性vm.reversedMessage会立即返回之前的计算结果（缓存）。

计算属性的使用

示例1：反转字符串

现在我们要反转一下文本框中的内容，并在其下方显示出来。我们可以通过定义一个计算属性来实现。

<div id="example">
  <input v-model="message">
  <p>反转后的文本为：{{ reversedMessage }}</p>
</div>

new Vue({
  el: '#example',
  data: {
    message: 'Hello Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

在这个例子中，我们定义了一个计算属性reversedMessage，它返回的是this.message的反转结果。因为它是一个计算属性，所以每次访问它时，Vue.js都会自动计算它的值，并对其进行缓存。当我们修改this.message时，它才会重新计算。

示例2：统计在线用户名数

假设我们有一个在线聊天室，需要在界面上动态地统计当前在线的用户名数。为了实现这个功能，我们需要定义一个计算属性。

<div id="example">
  <ul>
    <li v-for="user in users">{{ user }}</li>
  </ul>
  <p>当前在线用户数：{{ userCount }}</p>
</div>

new Vue({
  el: '#example',
  data: {
    users: [
      'Alice',
      'Bob',
      'Charlie'
    ]
  },
  computed: {
    userCount: function () {
      return this.users.length;
    }
  }
})

在这个例子中，我们定义了一个计算属性userCount，它返回的是当前用户数组(this.users)的长度。每次用户数组改变时，Vue.js都会自动重新计算它的值，并对其进行缓存。因此只要用户数组没有改变，我们就可以重复访问它，而不会引起额外的开销。

计算属性和方法的区别

在Vue.js中，除了使用计算属性，我们也可以使用方法来进行状态的计算。

方法和计算属性的主要区别在于缓存。方法不会被缓存，而是在每次访问时重新计算。而计算属性会缓存其计算结果，只有在相关响应式依赖发生改变时才会重新计算。

一般来说，只要不涉及到复杂的逻辑，我们应该尽量使用计算属性，因为它们可以提高应用的性能。而对于一些非常复杂的计算逻辑，方法也是一个不错的选择。

总结

本文重点介绍了Vue.js的一个重要特性——计算属性。通过两个示例，我们了解了计算属性的使用方法和缓存机制，以及它与普通方法的区别。强烈建议使用计算属性来计算状态，以提高应用的性能。