在学习Vue的过程中，我们经常会使用计算属性来作为输出在页面中的数据内容，发现使用计算属性非常方便，但是学到后面我们又会发现一个叫侦听器的东西。

那么问题来了，侦听器和计算属性，哪个更牛逼，哪个更好用？

不少刚刚学习Vue的小白都会纠结这个问题，但是实际上我想给这些小白同学说，不用纠结，计算属性和侦听器咋一看上去使用方式，结果都差不多，但是理解了他们深层次的原理之后你就会发现，他们其实是用在不同情况下的。

那么就意味着，只有在符合特定情况下时，我们就会使用相对该情况最合适的特性来完成计算，显示数据的操作。

那么，我们应该在什么情况下使用计算属性，什么情况下使用侦听器呢？

不忙，我们先来各自回顾一下这两个特性的基本使用语法：

通过上面的两个案例，我们稍微回顾了一下计算属性和侦听器的用法。 我们其实可以从多个方面来分析这两个东西的区别，以此寻求适合这两种特性使用的情况。

当我们定义一个计算属性的时候，计算属性是一个函数，最后函数返回的结果就是计算属性得到的结果。 当我们去第一次使用计算属性的时候，会执行计算属性并进行计算，然后将计算的结果缓存起来。 后续当我们再去使用计算属性的时候，如果计算属性中使用到的数据没有发生变化，那么就会直接读取缓存的结果，不会重新计算。

带入到我们所写的案例中，就是这样的一个情形： 我们定义了一个total计算属性，当我们使用插值表达式{{total}}时，会去执行total这个计算属性。 在total计算属性中，使用this.num * this.price得到一个total总价作为计算属性的结果，最后会将计算出来的总价88缓存起来。 当我们下一次使用插值表达式{{total}}或者其他方式使用计算属性total的时候，就会检查计算属性中使用的this.num或者this.price有没有发生变化 如果this.num或者this.price没有发生变化，直接获取缓存的总结88作为计算属性的结果。 如果this.num或者this.price任何一项发生了变化，那么就会重新计算并得到一个总结结果，并重新将结果进行缓存。

注意： 每次计算的结果缓存的时候，都会重新创建一个变量保存结果。

当我们定义一个侦听器的时候，侦听器与data中的属性同名，当属性的值发生改变的时候，侦听器被触发执行。

带入到我们所写的案例中，就是酱紫的一个情形： 我们定义了两个侦听器，侦听num和price的变化，当我们改变num或者price的时候，会触发对应的侦听器。 在两个侦听器中，刚好做的都是将最新的num乘以最新的price得到一个总价并赋值给data中的total。

注意： 一个侦听器对应data中的一个属性，当属性发生变化时触发侦听器的执行。

从上面的特点来说，我们可以得出结论： 1).计算属性的应用场景是计算的内容需要依赖多个属性的情况 侦听器的应用场景是计算的内容依赖一个属性的情况 2).计算属性缓存结果时每次都会重新创建变量 而侦听器是直接计算，不会创建变量保存结果 也就意味着，数据如果会反复的发生变化，计算很多次的情况下，计算属性的开销将会更大，也就意味着这种情况不适合使用计算属性，适合使用侦听器 那么，如果一个数据反复会被使用，但是它计算依赖的内容很少发生变化的情况下，计算属性会缓存结果，就更加适合这种情况。 3).computed的结果是通过return返回的，而watch不需要return。 4).watch中的参数可以得到侦听属性改变的最新结果，而computed函数没有这种参数。

补充： watch只会监听数据的值是否发生改变，而不会监听地址的变化，如果需要监听引用类型的数据变化，需要深度监听：obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。 在特殊的情况下(更改数组中的数据时，数组已经更改，但是视图没有更新)，watch无法监听数组的变化,更改数组必须要用splice()或者$set。

我们在计算开销比较大(计算次数多或者异步处理)的时候，会使用侦听器watch来得到计算结果。 而其他情况建议使用计算属性computed，因为缓存节省多次计算的性能。