vue计算属性与方法跟侦听器区别的解析

然后我们通过浏览器改变age属性的值，让页面重新渲染:

大家可以看到，我们改变了age值计算属性的方法没有被调用,那如果计算属性的值发生了改变，如lastName或者firstName改变，打印结果又会怎么样呢?

大家可以看到，当他依赖的发生变化的时候，计算属性会重新计算一次。

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果:

<p>Reversed message: "{{ fullName() }}"</p>


// 在组件中
methods: {
 fullName: function () {
 console.log("计算了一次")
 return this.firstName + " " + this.lastName;
 }
}

结果：

王小智

同样参照上面，我们通过浏览器改变age属性的值，让页面重新渲染:

可以看出，我们页面只要重新渲染，方法都会执行一次，而计算属性只有在它的相关依赖发生改变时才会重新求值。

计算属性 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没有变化，跟计算属性类似，会有缓存，只有在它的相关依赖发生改变时才会重新求值,将它与计算属性的版本进行比较,好得多了，不是吗？