计算属性
vue的模板里可以使用表达式，但是它的设计初衷是用于简单计算，在模板中放入太多逻辑会让模板过重且难以维护。例如：
<div id="example"> {{ message.split('').reverse().join('') }} </div>
这里很难一眼看出是要显示什么，而且要多次使用的话也很麻烦，因此对于复杂逻辑应使用计算属性
错误示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message.split('').reverse().join('') }}</p>
</div>
<script>
let app = new Vue({
el:"#app", //关联dom对象
data:{
message:'I have a dream' //模板使用的数据
},
})
</script>
</body>
</html>
正确写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 直接使用方法名就行，不用加括号 -->
<p>{{ reversedMessage }}</p>
</div>
<script>
//建议vue的变量命与作用的标签id一致
let app = new Vue({
el: "#app", //关联dom对象
data: {
message: 'I have a dream' //模板使用的数据
},
//定义计算属性
computed: {
// 在computed里定义方法，使用的时候直接写方法名
reversedMessage: function () {
// `this` 指向 app 实例，data里面的数据可以直接获取到htis.message
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
计算属性与方法的不同
上述例子中也可以通过调用方法来达到同样的目的
在组件中定义方法
// 在组件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }
调用方法
<p>Reversed message: "{{ reversedMessage() }}"</p>
就得到的结果而言，两种方式是完全一致的。但是不同的是，计算属性是基于它们的依赖进行缓存的，也就是说，计算属性只有在它的相关依赖发生改变时才会重新求值，对于上述的例子，只要message不发生改变，多次访问reversedMessage计算属性会立即返回结果而不必再次执行函数
下面我们来验证这个结论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>使用计算属性</p>
<p>{{reversedMessage}}</p>
<hr>
<p>使用方法</p>
<p>{{reversedMessageMethod()}}</p>
</div>
<script>
//建议vue的变量命与作用的标签id一致
let app = new Vue({
el:"#app",
data:{
message:"I have a dream",
},
//计算属性
computed:{
reversedMessage:function () {
console.log("in computed");
return this.message.split("").reverse().join("")
}
},
methods:{
reversedMessageMethod:function () {
console.log("in method");
return this.message.split("").reverse().join("")
}
}
})
</script>
</body>
</html>
在chrome中打开“开发者工具”，在控制台手动输入app.reversedMessage回车，查看再次调用计算属性的结果；输入app.reversedMessage()回车，查看多次调用方法的结果。可查看计算属性和methods的区别。
小结
- 模板内表达式包含复杂逻辑时，应使用计算属性
- 只要计算属性使用的数据不发生变化，计算属性就不会执行，而是直接使用缓存
使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用 计算属性，除非你不希望得到缓存。
转载自https://www.cnblogs.com/zzliu/p/10778008.html