Vue知识点：计算属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue知识点：计算属性相关的知识，希望对你有一定的参考价值。
参考技术A 1. 定义：计算属性不存在，要通过已有属性计算得出。2. 原理：底层借助了Object.defineproperty方法提供的getter和setter。
3. get函数什么时候执行？
（1）初次读取时会执行一次。
（2）当依赖的数据发生改变时会被再次调用。
4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5. 备注：
（1）计算属性最终会出现在vm上，直接读取使用即可。
注：可以直接使用插值方法调用计算属性。比如： fullname
（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发 生改变。
```javascript
<div id="root">
姓：<input type="text" v-model="firstName"/> <br>
名：<input type="text" v-model="lastName"/> <br>
全名：<span>fullName</span>
</div>
const vm = new Vue(
el:"#root",
data:
firstName:'张',
lastName:'三'
，
computed:
//完整写法 计算属性是一个对象
fullName:
get()
console.log('get被调用了')
return this.firstName + '-' + this.lastName
,
set(value)
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
,
//简写 fullName 只考虑读取，不需要修改的时候简写
fullName()
console.log('get被调用了')
return this.firstName + '-' + this.lastName
,
,
)
```
vue图书小案例
小知识点：
vue中计算属性有缓存（对象属性变化时才会更新），方法没有缓存，所以计算属性比方法效率高
js中let有块级作用域，var没有块级作用域，所以var是有缺陷的
this.letters[0] = ‘bb‘; //vue中，这种做法并不是响应式的；推荐使用响应式方法：this.letters.splice(0,1,‘cc‘);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<ul v-if="books.length">
<ul>
<li v-for="(v,k) in books">
<button @click="add(k,false)" :disabled="v.num <= 1">-</button>
<input type="text" :value="v.num">
<button @click="add(k,true)">+</button>
<div>{{v.name}}</div>
<div>{{v.price * v.num | showPrice}}</div>
<button @click="rm(k)">移除</button>
</li>
</ul>
总价{{total_price | showPrice}}
</ul>
<div v-else>当前没有图书</div>
</div>
</body>
<script>
let v = new Vue({
el : "#app",
data : {
books : [
{
name : ‘天龙八部‘,
price : 33,
num : 1,
},
{
name : ‘鹿鼎记‘,
price : 13,
num : 1,
},
]
},
methods : {
add : function(k,boo){
let obj = this.books[k];
if(boo) {
obj.num+=1;
}else{
obj.num-=1;
}
//this.books.splice(k,k+1,obj);
},
rm : function(k){
this.books.splice(k,1);
}
},
// 计算属性
computed : {
total_price : function(){
let total = 0;
for(let i = 0;i < this.books.length;i++ ){
total += (this.books[i].price * this.books[i].num);
}
return total;
}
},
// 过滤器
filters : {
showPrice : function(price){
return ‘$‘ + price.toFixed(2);
}
}
})
</script>
</html>
以上是关于Vue知识点：计算属性的主要内容，如果未能解决你的问题，请参考以下文章