Vue 2.0学习笔记之Vue中的computed属性
时间：2019-01-07 分类：Vue 作者：编程之家
Vue中的 compu ted 属性 称为 计算属性 。在这 一节中，我们学习Vue中的计算属性 如何使用？记得在学习Vue的模板相关的知识的时候，知道在模板内可以使用表达式，而且模板内的表达式是非常的便利，但这种遍历是有一定的限制的，它们实际上是用于一些简单的运算。也就是说，如果在模板中放入太多的逻辑会让模板过重而且难以维护。咱们先来看一个 示例：
rush:xhtml;">
{{ message.split('').reverse().join('') }}
在这 个示例中，模板不再简单和清晰。你必须看一段时间才能意识到，这里是想要显示 变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
这就是对于任何复杂逻辑，你都应当使用 计算属性 的原因。接下来咱们一起来学习Vue中的计算属性 。
计算属性 可用于快速 计算视图（ View ）中显示 的属性 。这些计算将被缓存，并且只在需要时更新。
在Vue中有多种方法 为视图设置值：
使用指令直接将数据值绑定到视图
使用简单的表达式对内容 进行简单的转换
使用过滤器对内容 进行简单的转换
除此之外，我们还可以使用计算属性 根据数据模型中的值或一组值来计算显示 值。
计算属性 允许我们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在需要时更新。
例如，我们可以在数据模型中有一个 results 数组：
rush:js;">
data () {
return {
results: [
{
name: 'English',marks: 70
},{
name: 'Math',marks: 80
},{
name: 'History',marks: 90
}
]
}
}
假设我们想要查看所有主题 的总数。我们不能使用 filters 或 expressions 来完成这个任务。
filters ：用于简单的数据格式，在应用程序的多个位置都需要它
expressions ：不允许使用流操作或其他复杂的逻辑。他们应该保持简单
这个时候，计算属性 就可以派上用场。我们可以向模型中添加 一个 计算值，如下：
rush:js;">
co
mpu ted: {
totalMarks: function () {
let total = 0
let me = this
for (let i = 0; i < me.results.length; i++) {
total += parseInt(me.results[i].marks)
}
return total
}
}
totalMarks 计算属笥使用数组 resultes 的 marks 计算出总值。它只是循环遍历值并返回子总数。
然后，我们可以在视图中显示 计算值：
rush:xhtml;">
Marks for {{ subject.name }}: {{ subject.marks }}
Total marks are: {{ totalMarks }}
效果 如下：
我们可以使用Vue中的 method 计算出学科的总分，最终得到的总数结果是相同的。
在上例的基础上，我们把 compu ted 区块中的 totalMarks 函数 整体移到 methods 中。同时在模板中将 {{ totalMarks }} 替换成 {{ totalMarks() }} 。 你最终看到的结果是一样的，如下所示：
rush:js;">
let app = new Vue({
el: '#app',data () {
return {
results: [
{
name: '英语',marks: 70
},{
name: '数学',marks: 80
},{
name: '历史',marks: 90
}
]
}
},methods: {
totalMarks: function () {
let total = 0
let me = this
for (let i = 0; i < me.results.length; i++) {
total += parseInt(me.results[i].marks)
}
return total
}
}
})
输出的结果是相同的，但是性能 将遭受毁灭性的打击。使用这种方法 ， totalMarks() 方法 在每次页面 渲染时都被执行一次（例如，使用每一个 change ）。
如果我们有一个 计算属性 ，那么Vue会记住计算的属性 所依赖的值（在我们这个示例中，那就是 results ）。通过这样做，Vue只有在依赖变化时才可以计算值。否则，将返回以前缓存的值。这也意味着 只要 results 还没有发生改变，多次访问 totalMarks 计算属性 会立即返回之前的计算结果，而不必再次执行函数 。
上面两个示例也说明，在Vue中 计算属性 是基于它们的依赖进行缓存的，而方法 是不会基于它们的依赖进行缓存的。从而使用计算属性 要比方法 性能 更好。
这也同样意味着下面的计算属性 将不再更新，因为 Date.Now () 不是响应式依赖：
rush:js;">
co
mpu ted: {
Now : function () {
return Date.
Now ()
}
}
相比之下，每当触发重新渲染时，方法 的调用 方式将总是再次执行函数 。因此，函数 必须是一个 纯函数 。它不能有副作用。输出 只能依赖于传递给函数 的值。
那么我们为什么需要缓存？假设我们有一个 性能 开销比较大的的计算属性 A ，它需要遍历一个 极大的数组和做大量的计算。然后我们可能有其他的计算属性 依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用方法 来替代。
计算属性 的 setter
计算属性 默 认只有 getter ，不过在需要时你也可以提供一个 setter ：
rush:js;">
co
mpu ted: {
fullName: {
// getter
get: function () {
return this.f
irs tName + ' ' + this.lastName
},// setter
set: function (newValue) {
var names = newValue.split(' ')
this.f
irs tName = names[0]
this.lastName = names[names.length - 1]
}
}
}
效果 如下：
你在输入框中输入一个 fullName ，然后点击 set 按钮，可以看到对应的效果 。你现在再运行 app.fullName="Airen liao" 时，计算属性 的 setter 会被调用 ， app.firs tName 和 app.lastName 也相应地会被更新。如下图所示：
观察者
虽然计算属性 在大多数情况下更合适，但有时候也需要一个 自定义 的 watcher 。这是为什么Vue通过 watch 选项提供一个 更通用的方法 ，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。
Vue确实提供了一种更通用的方式来观察和响应Vue实例上的数据变动： watch 属性 。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch 。然而，通常更好的想法是使用计算属性 而不是命令式的 watch 回调。比如下面的示例：
rush:xhtml;">
let app = new Vue({irs tName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'irs tName: function (val) {irs tName + ' ' + val
上面代码 是命令式的和重复的。将它与计算属性 的版本进行比较：
rush:js;">
let app = new Vue({
el: '#app',lastName: 'Bar'
}
},co
mpu ted: {
fullName: function () {
return this.f
irs tName + ' ' + this.lastName
}
}
})
在Vue中使用异步计算属性
Vue中的计算属性 非常好。它们允许你执行复杂的操作或数据格式，同时最大限度地执行依赖项计算的性能 ，只在依赖更改时更新视图。但遗憾的是，它们完全是同步的。
值得庆幸的是，有一个 插件 。使用vue-async-computed 包可以通地将一个 promise 的值绑定到组件属性 来创建和使用组件中的异步计算属性 。
我们可以在项目的根目录下通过 yarn 或 npm 来安装 vue-async-compu ted 插件 ：
rush:bash;">
# Yarn
$ yarn add vue-async-co
mpu ted
# NPM
$ npm i vue-async-co
mpu ted --save
接下来在你的项目中开启这个插件 ：
Vue.use(AsyncComputed);
new Vue({
如果你和我一样，对Vue的构建工具不是很熟悉的话，我建议你使用Vue官方提供的构建工具 Vue CLI 。默 认情况，它提供了五种模板，你可以根据自己喜欢的方式选择自己需要的模板即可。
确认在项目中引用 vue-async-compu ted 之后，咱们就可以开始使用这个插件 了。使用如何使用这个插件 之前，先来简单的了解一些概念。
在Vue中标准计算属性 和异步属性 之间有一些区别：
异步属性 不能有 setter
直到 promise 的 resolve 为止，除非 default 被设置，否则该值为 null
在大多数情况下，你可以将它们视为返回 promise 的计算属性 。
rush:js;">
Asynchronous Property {{ myResolvedValue }}
使用ES7 / ES2016的 async / await ，这将变得更简单：
rush:js;">
Asynchronous Property {{ myResolvedValue }}
有关于vue-async-computed 更详细的使用和介绍，可以阅读其 官网 提供的相关介绍。
总结
今天主要学习了Vue中的计算属性 。在Vue中的计算属性 可以让我们很好的监听多个数据或者一个 数据来维护返回一个 状态值，只要其中一个 或多个数据发生变化，则会重新计算整个函数 体，重新皇家马德里回状态值，从而更新对应的视图（View）。其次，计算属性 具有缓存，相比Vue中的方法 而言，性能 更佳。但Vue中的计算属性 都是同步的，如果需要异步我们得依赖于vue-async-computed 。
由于自己是Vue的初学者，对Vue的计算属性 也只是停留在表面层上的理解，如果从深层面上看，还是会存在一定问题。希望各咱大婶能指正或提供自己的经验。
以上就是本文的全部内容 ，希望对大家的学习有所帮助，也希望大家多多支持 编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
