Vue 的计算属性(computed)
今天有事努力的一天！！！
如果事与愿违，那一定另有安排。积极生活，让我们的每一天都充满热情。
上知识！
在Vue中我们可以通过计算将已知的属性通过computed计算得到不存在是属性
比如说我们在下面举一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>methods实现</title>
<script src="../vue.js/vue.js"></script>
</head>
<body>
<h1>购物车</h1>
<div id="root">
商品单价：<input type="text" v-model="oneprice">
<br /><br />
商品数量：<input type="text" v-model="quantity">
<button @click="add">+</button> <button @click="sub">-</button>
<br /><br />
商品总价：<span>{{totalprice}}</span>
</div>
<script>
const vm = new Vue({
el: '#root',
//属性
data: {
oneprice: 29,
quantity: 1
},
methods:{
add:function(){
this.quantity++
},
sub:function(){
this.quantity--
}
},
// 计算属性
computed: {
totalprice: {
get() {
return this.oneprice * this.quantity
},
set(value){
console.log('set',value)
const arr = value.split('-')
this.oneprice = arr[0]
this.quantity = arr[1]
}
}
}
})
</script>
</body>
</html>
由以上代码我们可知oneprice和quantity属性是已知的，但是totalprice属性是不存在的。但是我们可以通过computed 计算属性计算得到totalprice属性。即通过已有的属性计算得到不存在的属性。
以下代码：通过oneprice * quantity 得到 totalprice
data: {
oneprice: 29,
quantity: 1
}
此处我们在data中定义了oneprice和quantity的初始值，那么他们就充当的已存在的属性，然后我们绑定点击事件就可以实现用户控制商品数量的加减。
methods:{
add:function(){
this.quantity++
},
sub:function(){
this.quantity--
}
}
这里我们使用add()函数和sub()函数，可以简单的计算控制quantity的自增自减
computed: {
totalprice: {
get() {
return this.oneprice * this.quantity
},
set(value){
console.log('set',value)
const arr = value.split('-')
this.oneprice = arr[0]
this.quantity = arr[1]
}
}
}
商品总价就等于商品单价*商品数量。我们还需要使用到get函数
这里我们使用get原理是：当有人读取totalprice时，get就会被调用。且返回值就作为totalprice的值
那我们什么时候使用get：1.初次读取totalprice时。 2.所依赖的数据发生变化时
set(value){
console.log('set',value)
const arr = value.split('-')
this.oneprice = arr[0]
this.quantity = arr[1]
}
这里的set函数是当计算属性被修改时需要调用set函数，且需要依赖数据的变化
那么今天就讲到这里，让我们来做个总结
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得到
2.原理：底层借助了object.defineproperty()方法提供getter和setter
3.get函数什么时候被执行？
（1）初次被读取时
（2）当依赖的数据发生变化时会被再次强调
4.优势：与methods实现相比，内部有缓存机制，效率更高，测试方便
5.备注：
(1) 计算属性最终会出现在vm上，直接读取即可
(2) 如果计算属性要被修改，那必须写set函数去相应修改，且set中要引起计算时依赖数据发生变化
- 点赞
- 收藏
- 关注作者
评论（0）