这次给大家带来vue中computed属性的使用方法，vue中computed属性使用的注意事项有哪些，下面就是实战案例，一起来看一下。
vue中的 computed 属性称为 计算属性
。在这一节中，我们学习vue中的计算属性如何使用？记得在学习vue的模板相关的知识的时候，知道在模板内可以使用表达式，而且模板内的表达式是非常的便利，但这种遍历是有一定的限制的，它们实际上是用于一些简单的运算。也就是说，如果在模板中放入太多的逻辑会让模板过重而且难以维护。咱们先来看一个示例：
<p id="app">
<h1>{{ message.split('').reverse().join('') }}</h1>
</p>
在这个示例中，模板不再简单和清晰。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
这就是对于任何复杂逻辑，你都应当使用 计算属性 的原因。接下来咱们一起来学习vue中的计算属性。
计算属性可用于快速计算视图（ view ）中显示的属性。这些计算将被缓存，并且只在需要时更新。
在vue中有多种方法为视图设置值：
使用指令直接将数据值绑定到视图
使用简单的表达式对内容进行简单的转换
使用过滤器对内容进行简单的转换
除此之外，我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。
计算属性
计算属性允许我们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在需要时更新。
例如，我们可以在数据模型中有一个 results 数组：
data () {
return {
results: [
{
name: 'english',
marks: 70
},
{
name: 'math',
marks: 80
},
{
name: 'history',
marks: 90
}
]
}
}
假设我们想要查看所有主题的总数。我们不能使用 filters 或 expressions 来完成这个任务。
filters ：用于简单的数据格式，在应用程序的多个位置都需要它
expressions ：不允许使用流操作或其他复杂的逻辑。他们应该保持简单
这个时候，计算属性就可以派上用场。我们可以向模型中添加一个计算值，如下：
computed: {
totalmarks: function () {
let total = 0
let me = this
for (let i = 0; i {
settimeout(() => resolve('*fancy* resolved value!'), 1000)
})
}
}
}
</script>
使用es7 / es2016的 async / await ，这将变得更简单：
<!-- mycomponent.vue -->
<template>
<!-- 在一两秒后 myresolvedvalue将变成"*fancy* resolved value" -->
<h2>asynchronous property {{ myresolvedvalue }}</h2>
</template>
<script>
function fancinesscomeslater () {
return new promise((resolve, reject) => {
settimeout(() => resolve('*fancy* resolved value!'), 1000)
})
}
export default {
asynccomputed: {
async myresolvedvalue() {
return await fancinesscomeslater()
}
}
}
</script>
有关于vue-async-computed 更详细的使用和介绍，可以阅读其 官网 提供的相关介绍。
总结
今天主要学习了vue中的计算属性。在vue中的计算属性可以让我们很好的监听多个数据或者一个数据来维护返回一个状态值，只要其中一个或多个数据发生变化，则会重新计算整个函数体，重新皇家马德里回状态值，从而更新对应的视图（view）。其次，计算属性具有缓存，相比vue中的方法而言，性能更佳。但vue中的计算属性都是同步的，如果需要异步我们得依赖于vue-async-computed 。
由于自己是vue的初学者，对vue的计算属性也只是停留在表面层上的理解，如果从深层面上看，还是会存在一定问题。希望各咱大婶能指正或提供自己的经验。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
原生ajax的get和post方法使用详解
node.js往mysql大量注入数据
用requirejs添加返回顶部功能
以上就是vue中computed属性的使用方法的详细内容。