代码干货 | 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 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。

>>>展开全文