计算属性, Vue独有的特性
计算属性跟方法的对比
1.写成方法调用,也可以实现功能,但是由于方法是调用的,每当数据更新引起页面更新,每一个方法调用都会再执行一次,当方法很多且逻辑很复杂时,内存开销会很大.
2.计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值.所以，对于任何复杂逻辑，你都应当使用计算属性。
小插曲
面试题目:解决在输入框输入内容时,频繁向服务器请求的问题。
答案：引入lodash.js，在请求的方法后面添加_.debounce，即可避免频繁向服务器请求的问题。
代码参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button @click="a++">a自增</button>
<button @click="b++">b自增</button>
<p>a的值为:{{a}}</p>
<p>b的值为:{{b}}</p>
<!-- <p>a+c的结果:{{getA()}}</p> -->
<p>a+c的结果:{{getAaddC}}</p>
<!-- <p>b+c的结果:{{getB()}}</p> -->
<p>b+c的结果:{{getBaddC}}</p>
<hr>
<p>显示name的结果:{{name}}</p>
<button @click="name='羊驼'">点击改变</button>
<hr>
<ul>
<!-- 通过计算属性实现数组的过滤，而后遍历展示 -->
<li v-for="num in getResult">{{num}}</li>
</ul>
<hr>
<p>面试题目:解决在输入框输入内容时,频繁向服务器请求的问题</p>
<!--lodash.js中的方法解决问题-->
<input type="text" @input="doInput">
</div>
</body>
</html>
<script src="lodash.js"></script>
<script>
/*
* 计算属性, Vue独有的特性
* 计算属性跟方法的对比:
* 1.写成方法调用,也可以实现功能,但是由于方法是调用的,每当数据更新引起页面更新的话,每一个方法调用都会再执行一次,所有的方法很多,且逻辑很复杂,内存开销会很大.
* 2.计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值.
*/
let vm1 = new Vue({
el: '#app',
data: {
a: 10,
b: 20,
c: 30,
str: '',
arr: [13, 22, 35, 42, 57]
},
methods: {
getA() {
return this.a + this.c;
},
getB() {
return this.b + this.c;
},
// 使用_.debounce,可使函数延迟执行
doInput: _.debounce(function (e) {
console.log('执行了doInput函数', e.target.value);
},2000)
},
// 优先考虑使用计算属性实现
computed: {
// 属性的getter方法,可以把getAaddC看做一个属性
getAaddC: function () {
console.log('getAaddC执行');
return this.a + this.c;
},
getBaddC: function () {
console.log('getBaddC执行');
return this.b + this.c;
},
name: {
get: function () {
return this.str;
},
set: function (v) {
this.str = v;
}
},
// 通过计算属性，实现数组的过滤。Vue官网推荐计算属性代替过滤器
getResult: function (v) {
return this.arr.filter((v) => {
return v > 30;
});
}
}
});
</script>