详解vue 计算属性与方法跟侦听器区别(面试考点) 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
Reversed message: "{{ fullName() }}"
// 在组件中 methods: { fullName: function () { console.log("计算了一次") return this.firstName + " " + this.lastName; } } 结果: 王小智 同样参照上面,我们通过浏览器改变age属性的值,让页面重新渲染: 可以看出,我们页面只要重新渲染,方法都会执行一次,而计算属性只有在它的相关依赖发生改变时才会重新求值。 我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。 计算属性 vs 侦听属性 你可能已经注意到我们还可以通过侦听属性达到同样的效果: var vm = new Vue({ el: '#app', data: { firstName: "王", lastName: "小智", age: 28, fullName }, // 计算属性 watch: { firstName: function () { console.log("计算了一次"); this.fullNmae = this.firstName + this.lastName; }, lastName: function () { console.log("计算了一次") this.fullNmae = this.firstName + this.lastName; } } }) 结果: 王小智 同样参照上面,我们通过浏览器改变age属性的值,让页面重新渲染: 大家可以看到,和fullname不相关的改变,fullName没有变化,跟计算属性类似,会有缓存,只有在它的相关依赖发生改变时才会重新求值,将它与计算属性的版本进行比较,好得多了,不是吗? 当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。