计算属性和侦听器的区别

401 阅读2分钟

计算属性 computed:

1. 计算属性支持缓存,只有当依赖项数据发生改变,才会重新进行计算
2. 计算属性是不支持异步操作的,当计算属性computed内有异步操作的时候,无法监听数据的变化,此时计算属性computed是无效的
3. 如果计算属性computed需要对数据进行修改,需要写get和set两个方法,当数据变化时,就调用set方法
4. 计算属性computed擅长处理的场景,就是一个数据受多个数据的影响;比如项目中的购物车计算价格,数据的全选和反选

侦听器 watch

1. 侦听器是不支持缓存的,数据变化,就会直接触发响应的操作
2. watch支持异步的操作:监听的函数接受到两个参数,第一个参数是最新的值,第二个参数是输入之前的值
3. 侦听器中的immediate属性: immediate设置为 true 的意思就是组件加载立即触发回调函数执行 
4. 侦听器中的deep属性,deep设置为 true 的意思就是深入侦听,修改对象里面任何一个属性都会触发这个监听器里面的 handler 方法来处理响应的逻辑
5. 侦听器watch擅长处理的业务场景:一个数据影响多个数据,比如项目中的搜索框

两者总结:

1. 计算属性computed和侦听器watch的共同点在于:都具有监听数据属性变化的功能
2. 计算属性computed和侦听器watch的不同点在于 : 计算属性是基于它们的响应式依赖数据进行缓存的,只有在依赖项数据发生改变的时候它们才会重新求值,性能开销相对来说比较小;
    侦听器不是需要手动进行调用的,当数据中的任何一个数据发生变化都会自动触发来进行相应的操作