Vue计算属性的使用

Vue中的计算属性是一种依赖其他属性并且根据这些属性进行计算的属性。它们在模板中使用时表现为普通属性，但是它们的值实际上是在计算中获得的。计算属性具有缓存机制，只有在它的相关依赖发生改变时才会重新计算。

定义计算属性

定义一个计算属性需要在Vue实例中通过computed属性定义一个对象，并在对象中定义计算属性的名称和计算方法：

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

以上代码中，我们定义了一个计算属性reversedMessage，它依赖message属性，计算方法是将message属性的值反转，并返回这个新的值。这时我们在模板中可以使用这个计算属性：

<div id="app">
  <p>Original message: {{ message }}</p>
  <p>Computed reversed message: {{ reversedMessage }}</p>
</div>

这样会展示两个<p>标签，第一个展示原始的消息，第二个展示通过计算属性反转后的消息。

计算属性缓存

计算属性默认是具有缓存机制的，这意味着计算属性的值只要依赖的属性没有发生变化，就不会重新计算。我们可以通过以下示例来理解缓存机制：

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  computed: {
    reversedMessage: function() {
      console.log('Computed the reversed message.')
      return this.message.split('').reverse().join('')
    }
  }
})

<div id="app">
  <p>Original message: {{ message }}</p>
  <p>Computed reversed message: {{ reversedMessage }}</p>
  <button @click="message = 'world'">Change Message</button>
</div>

以上代码中，我们将控制台输出语句加入到计算属性中，在页面中有一个按钮来改变message属性的值。当页面第一次加载的时候，控制台会输出Computed the reversed message.。当我们点击按钮改变message属性的值时，控制台不会再次输出语句。

这是因为计算属性的缓存机制，当依赖的属性值没有发生改变时，计算属性会直接从缓存中取值而不是重新计算。这个缓存机制可以显著的提高应用性能。但是在某些情况下，你需要在每次计算属性被访问时，都执行一次计算方法，你可以通过给计算属性定义get方法并返回计算方法的执行结果来实现：

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  computed: {
    reversedMessage: {
      get: function() {
        console.log('Computed the reversed message.')
        return this.message.split('').reverse().join('')
      }
    }
  }
})

计算属性vs监视属性

在Vue中，我们可以使用watch选项来监听数据的变化，执行一些函数来响应数据的变化。那么和计算属性有什么本质上的区别呢？

计算属性本质上是闭包函数，当计算属性依赖的数据发生变化时，计算属性就会重新执行计算方法获得新的值。而监视属性是在数据发生变化后，才执行我们定义的响应函数。

我们来看一个例子：

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello',
    reverseMessage: ''
  },
  computed: {
    computedReverseMessage: function() {
      console.log('computed message')
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message: function(newVal, oldVal) {
      console.log('watch message')
      this.reverseMessage = newVal.split('').reverse().join('')
    }
  }
})

<div id="app">
  <p>Original message: {{ message }}</p>
  <p>Computed reverse message: {{ computedReverseMessage }}</p>
  <p>Watch reverse message: {{ reverseMessage }}</p>
  <button @click="message = 'world'">Change Message</button>
</div>

以上代码中，我们定义了一个计算属性computedReverseMessage，它的计算方法和我们之前的例子一样，我们还定义了一个监视属性reverseMessage，当message属性变化时，我们使用watch选项触发了一个新的函数来计算反转后的消息。

我们在页面中添加了三个<p>标签，分别展示原始消息、通过计算属性反转后的消息和通过监视属性反转后的消息。我们还添加了一个按钮来改变message属性的值。

当页面加载时，我们会在控制台中看到computed message、watch message的输出语句。这是因为计算属性和监视属性都在页面加载后就开始监听数据变化，并执行了对应的方法。

当点击按钮改变message属性的值时，我们会在控制台中看到再次输出computed message和watch message，由于计算属性具有缓存机制，它只会在第一次计算时输出语句，而监视属性监听的函数会每次都执行。