本文共 2027 字，大约阅读时间需要 6 分钟。

概念图：

计算属性

计算缓存 vs Methods

计算属性 vs Watched Property

------------------------------------------------------

计算属性

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

   
      {
  { message.split('').reverse().join('') }}
   

在这种情况下，模板不再简单和清晰。在实现反向显示 message 之前，你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。

这就是为什么任何复杂逻辑，你都应当使用计算属性。

demo:

<div id="example"> <p>Original message: "{

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } })

 Vue 知道 vm.reversedMessage 依赖于 vm.message ，因此当 vm.message 发生改变时，依赖于 vm.reversedMessage 的绑定也会更新。

计算缓存 vs Methods

我们可以通过调用表达式中的method来达到同样的效果

Reversed message: "{
  { reverseMessage() }}"

// in componentmethods: {  reverseMessage: function () {    return this.message.split('').reverse().join('')  }}

。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它的依赖缓存。

computed: { now: function () { return Date.now() } }

相比而言，每当重新渲染的时候，method 调用总会执行函数。

如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用 method 替代。

Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时

观察 Watchers:

计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。

demo1:

<div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{

在这个示例中，使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。

demo2:

var vm = new Vue({  el: '#demo',  data: {    firstName: 'Foo',    lastName: 'Bar',    fullName: 'Foo Bar'  }}) vm.$watch('firstName', function (val) {  this.fullName = val + ' ' + this.lastName})

使用watch 后:

var vm = new Vue({  el: '#demo',  data: {    firstName: 'Foo',    lastName: 'Bar',    fullName: 'Foo Bar'  },  watch: {    firstName: function (val) {      this.fullName = val + ' ' + this.lastName    },    lastName: function (val) {      this.fullName = this.firstName + ' ' + val    }  }})

参考博文：

转载地址：https://blog.csdn.net/xiamaocheng/article/details/104574892 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！