Vue.js计算属性和侦听器

1、计算属性

模板内的表达式非常便利，但是它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

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

在这个地方，模板不再是简单的声明式逻辑。且无法做到见文知意，需要看一段时间才会知道其表达的意思。多次引用此处的翻转字符串时，会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性，计算属性关键词: computed。

(1)、例子

  
原始字符串: {{ message }}
  
计算后反转字符串: {{ reversedMessage }}

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Cai!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

结果如下：

截图1

这里声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数。
像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

(2)、计算属性缓存-vs-方法

我们可以通过在表达式中调用方法来达到同样的效果：

  
原始字符串: {{ message }}
  
计算后反转字符串: {{ reversedMessage }}
使用方法后反转字符串: {{ reversedMessage2() }}

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Cai!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

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

---

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

(3)、计算属性的setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

  
{{ site }}

var vm = new Vue({
  el: '#app',
  data: {
    name: 'HFMX',
    url: 'http://www.51ygcg.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '明信阳光采购 http://www.51ygcg.com';
document.write('name: ' + vm.name);
document.write('
');
document.write('url: ' + vm.url); 

结果如下：

截图2

2、侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

    千米 : 
    米 : 

var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = val * 1000;
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一个实例方法
        vm.$watch('kilometers', function (newValue, oldValue) {
        // 这个回调将在 vm.kilometers 改变后调用
        document.getElementById ("info").innerHTML = 
       "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    });

结果如下：

截图3

以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。

当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。
除了 watch 选项之外，您还可以使用命令式的 vm.$watch API。