计算属性, 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>