4-Vue计算属性和侦听器

对于任何复杂逻辑，你都应当使用计算属性。

    
原信息：{{message}}
    
计算后：{{reverseMessage}}

       var vm = new Vue({
            el: '#computed',
            data: {
                message: 'hello!',
            },
            computed: {
                reverseMessage(){
                    // this指向vm实例
                    return this.message.split('').reverse().join('');
                }
            },
        });
        console.log(vm.reverseMessage);     //!olleh
        vm.message = '你好!';
        console.log(vm.reverseMessage);     //!好你

你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。

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

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

Reversed message: "{{ reversedMessage() }}"
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

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

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

计算属性的 setter

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

{{ fullName }}

        var vm = new Vue({
            el: '#demo',
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
            },
            computed: {
                fullName: {
                    // getter
                    get: function () {
                    return this.firstName + ' ' + this.lastName
                    },
                    // setter
                    set: function (newValue) {
                    var names = newValue.split(' ');        //先将字符串转换成数组
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                    }
                }
            }
        })

现在控制台再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。