computed
1:用来监控自己定义的变量,该变量不在data中声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
2:比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
3:模板中通过 {{ totalMarks }} 进行展示computed变化值
4:Vue中计算属性是基于它们的依赖进行缓存的,而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。
查阅了vue官网和https://www.cnblogs.com/gunelark/p/8492468.html
还是自己动手试一试吧!
样例:
<template>
<div>
<span style="float: right"> 科目总分: {{totalMarks}}</span>
<span style="margin-right: 10px"> 当前北京时间 {{ nowTime }}</span>
</div>
</template>
data() {
return {
loading: false,
results: [{ name: 'English', marks: 70 }, { name: 'Math', marks: 80 }, { name: 'History', marks: 90 }]
}
},
computed: {
totalMarks: function() {
let total = 0
const _this = this
for (let i = 0; i < _this.results.length; i++) {
total += parseInt(_this.results[i].marks)
}
return total
},
nowTime: function() {
return Date.now()
}
watch:
1:在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的;
差异:
1:当你有一些数据需要随着其它数据变动而变动时,你很容易滥用watch。然而,通常更好的想法是使用计算属性而不是命令式的watch回调;