computed、methods、watch、filter相关面试题

1、vue中computed和methods的区别？

computed:就是计算属性（属性调用），其可以当成一个data数据来使用

1. 在调用的时候直接以对象属性方式调用，不需要加括号
2. 在绑定的时候computed的getter和setter的方式是双向绑定
3. computed存在缓存，如果计算结果依赖字段没有发生变化的时候，不会重新计算，而是直接使用缓存中的值

应用场景：比较复杂的渲染数据计算或者不必重新计算数值的情况（数据转换、统计）

 methods 就是方法（函数调用）

1. 在调用的时候必须要函数执行才可以得到结果
2. 在绑定的时候，methods与compute纯getter方式是单项绑定，不可以更改输入框的值

3. methods没有缓存，调用相同的值还是会重新计算，调用一次就会去执行一次

4. methods不像computed在DOM加载后可以自动执行，他必须有一定的触发条件才能执行，如点击事件

 2、Vue 里 computed 和 watch 的区别

计算属性computed：

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内又异步操作时无效，无法监听数据的变化
3. computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个对多个或者一对一，一般用computed
5. 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，一开始就会调用get方法，在当数据变化时候，调用set方法

侦听属性watch：

1. 不支持缓存，数据发生变化，直接会触发响应的操作
2. watch支持异步
3. 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值
4. 当一个属性发生变化的时候，需要执行对应的操作，一对多
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作

immediate:组件加载立即触发回调函数执行

deep: deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler

 3、Vue 中filter与computed属性的区别

（1）定义方式不同

computed属性只能在组件内部或者通过mixins对象定义；

filter可以在组件内部通过filters属性定义；还可以在组件外部通过Vue.filter函数定义

（2）触发时机不同

computed 属性在属性所依赖的其他数据项发生变化时才会重新触发计算

filter 则显的简单很多，只在显式调用时触发，一般应用在模板渲染上

（3）应用范围不同

 computed 很广泛，可以应用在其他computed、methods、生命周期函数、模板

 filter 一般只应用于模板渲染上，如果要在其他位置复用，需要使用 this._f 函数：

（补充）计算结果和函数和过滤器的区别？

1、计算结果使用的是缓存，如果结果所依赖的data数据没有发生变化，计算结果使用上次计算的缓存，不会重新执行，但是函数每次调用都会去执行一次

2、计算结果定义在computed里面，函数和过滤分别定义字methods和filters

3、计算结果使用的时候像data里面数据一样使用，函数个过滤器使用的时候像函数调用的方式使用