Vue中filter和computed有何本质区别及各自具体应用场景？

本文共计976个文字，预计阅读时间需要4分钟。

Vue中的watch与computed、filter：+watch：监控现有属性，属性一旦变化就自动调用相应的方法+computed：监控现有属性，属性依赖变化时自动调用相应的方法+filter：JavaScript中的过滤器，用于处理数据输出

watch与computed、filter：

watch:监控已有属性，一旦属性发生了改变就去自动调用对应的方法

computed:监控已有的属性,一旦属性的依赖发生了改变，就去自动调用对应的方法

filter:js中为我们提供的一个方法，用来帮助我们对数据进行筛选

watch与computed的区别:

1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性

2.watch不会缓存数据，每次打开页面都会重新加载一次，

但是computed如果之前进行过计算他会将计算的结果缓存，如果再次请求会从缓存中
得到数据（所以computed的性能比watch更好一些）

最近遇到一个很不错的候选人，经验丰富，有技术亮点，但在一些细枝末节问题上没有回答的很好，最终还是被刷了。面试过程中有一个问题我印象特别深刻： Vue 中filter与computed属性的区别 ，可惜候选人在现场没有回答上，这里总结一下：

filter 与 computed 的区别

1. 触发时机不同

computed 属性背后的处理逻辑比较复杂，依赖 Vue 的数据更新通知机制，在属性所依赖的其他数据项发生变化时才会重新触发计算。