一、什么是计算属性
通过一系列运算之后,最终得到一个属性值。这个属性值可以被模板结构或methods方法使用。
在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。
计算属性是基于它的依赖缓存的,一个计算属性所依赖的数据发生变化,它才会重新取值,所以数据只要不改变,计算属性就不会更新,只解析一次。但是methods不同,只要重新渲染,它就会被调用,函数就会被执行。当遍历大数组和计算量很大时,应当使用计算属性。
二、基本语法
<body>
<div id="app">
<div>
<span>R:</span>
<input type="text" v-model.number="r">
</div>
<div>
<span>G:</span>
<input type="text" v-model.number="g">
</div>
<div>
<span>B:</span>
<input type="text" v-model.number="b">
</div>
<!-- 用户呈现小盒子 :代表属性绑定,动态绑定一个样式对象-->
<div class="box" :style="{ backgroundColor:rgb }">
{{ rgb }}
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
// 红色
r:0,
// 绿色
g:0,
// 蓝色
b:0
},
// 所有的计算属性,定义成“方法格式”
computed:{
// rgb 作为一个计算属性,定义成“方法格式”
// 在方法中返回生成rgb(x,x,x)的字符串,并当成属性来用
rgb:function (){
return `rgb(${this.r},${this.g},${this.b})`
}
},
methods:{
// 点击按钮,在终端显示最新的颜色
show(){
console.log(this.rgb)
}
}
})
</script>
三、watch和computed
computed和watch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
两个重要的小原则:
1.所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。