【VueJS】深入理解 computed 和 methods 方法

本文主要是介绍【VueJS】深入理解 computed 和 methods 方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

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

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

computed 方法

　　所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理，同时computed有缓存功能，防止复杂计算逻辑多次调用引起的性能问题。

在Vue中有多种方法为视图设置值：

使用指令直接将数据值绑定到视图
使用简单的表达式对内容进行简单的转换
使用过滤器对内容进行简单的转换

除此之外，我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。

版本区别

Vue1.x版本中，computed属性存在bug
Vue2.x版本中，修复了computed属性的此bug

在Vue1.x版本中

computed属性是一个大坑

如果我们在computed里声明的对象与data中的重名了，就会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。

<body><h1>Vue 排序</h1><hr><div id="app"><ul><li v-for="item in items">              // 注意对比这里{{item}}</li></ul></div><script>var app = new Vue({el: '#app',data: {items:[20,23,18,65,32,19,55,54,56,41]},computed: {items:function(){                    // 注意对比这里return this.items.sort();}}})</script>
</body>