代码干货 | vue计算属性

本文来源于阿里云-云栖社区，原文请点击这里。

计算属性

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

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这种情况下，模板不再简单和清晰。在意识到这是反向显示 message 之前，你不得不再次确认第二遍。当你想要在模板中多次反向显示 message 的时候，问题会变得更糟糕

这就是对于任何复杂逻辑都应当使用计算属性的原因

基础例子

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {    
        reversedMessage: function () {     // a computed getter
            return this.message.split('').reverse().join('')     // `this` points to the vm instance
        }
    }
})
</script>

这里我们声明了一个计算属性 reversedMessage 。我们提供的函数将用作属性 vm.reversedMessage 的 getter

console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'

vm.reversedMessage 的值始终取决于 vm.message 的值。因此当 vm.message 发生改变时，所有依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 是没有副作用，这使得它易于测试和推理

计算缓存 vs Methods

<p>Reversed message: "{{ reversedMessage() }}"</p>
<script>
methods: {     // in component
    reversedMessage: function () {
        return this.message.split('').reverse().join('')
    }
}
</script>

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。

>>>展开全文