详解vue计算属性与方法跟侦听器区别（面试考点）

计算属性

模板内的表达式⾮常便利，但是设计它们的初衷是⽤于简单运算的。在模板中放⼊太多的逻辑会让模板过重且难以维护。例如：

在这个地⽅，模板不再是简单的声明式逻辑。你必须看⼀段时间才能意识到，这⾥是想要显⽰变量 message 的翻转字符串。当你想要在模板中多次引⽤此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使⽤计算属性。基础例⼦

var vm = new Vue({ el: '#app', data: {

firstName: \"王\ lastName: \"⼩智\ age: 28 },

// 计算属性 computed: {

fullName: function () {

console.log(\"计算了⼀次\")

return this.firstName + \" \" + this.lastName } }})

结果：

王⼩智

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

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

⼤家可以看到，当他依赖的发⽣变化的时候，计算属性会重新计算⼀次。计算属性缓存 vs ⽅法

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

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 回调。以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。