vue中计算属性的用法（vue之计算属性）

官方解释：当模板中放入太多的逻辑，模板过重且难以维护时，你都应当使用计算属性

通俗表达：当你要渲染到页面的数据需要通过大量的计算才可以得到，这时候就应该使用计算属性

代码案例：

##html <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> ##js var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) 输出 Original message: "Hello" Computed reversed message: "olleH"

个人理解：过滤器和计算属性都可以把现有的数据变成你想要展示的数据，他们两个的不同点就在于对数据处理的复杂程度

有些对数据的处理逻辑，我们用自己些的方法也可以处理，那我们为什么要用计算属性呢?

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

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

也就是说有些数据用计算属性处理更加的友好，效更高！

关注我，每天收获一点点。