然后我们通过浏览器改变age属性的值，让页面重新渲染:
大家可以看到，我们改变了age值计算属性的方法没有被调用,那如果计算属性的值发生了改变，如lastName或者firstName改变，打印结果又会怎么样呢?
大家可以看到，当他依赖的发生变化的时候，计算属性会重新计算一次。
计算属性缓存 vs 方法
你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果:
<p>Reversed message: "{{ fullName() }}"</p>
// 在组件中
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——特别是如果你之前使用过