watch 和 computed 都是以 Vue的依赖追踪机制 为基础的,都在处理这么一件事情:当某一个或者多个数据发生变化时,所有依赖这些数据的“相关”数据可以自动发生变化,也就是自动调用相关函数去实现数据的变动。
1、computed
支持缓存,只有依赖数据发生改变,才会重新计算
不支持异步,当computed内有异步操作时无效,无法监听数据的变化
computed是计算属性,也就是依赖某个值或props通过计算得来的数据
computed的值是在getter执行之后进行缓存的,只有在它依赖的数据发生变化时,会重新调用getter来计算
即使data中没有直接声明要计算的变量,也可以在computed中写入。 比如 data只有lastName和firstName。 但是可以在computed直接写 fullName
2、watch
不支持缓存,数据变直接触发相应操作
支持异步操作
watch是监听器,可以监听某一个数据,然后执行相应操作。 里面有一个属性是deep,含义为:是否深度监听某个对象的值,默认为false
监听的函数接收两个参数,第一个参数是最新的值,第二个参数是输入之前的值
如果data中没有相应的属性的话,是不能watch的
3、两者的区别
computed是计算属性,watch是监听data中的数据变化
computed支持缓存,当其依赖的属性的值发生变化时,计算属性会重新计算。反之,则使用缓存中的属性值; watch不支持缓存,当对应属性发生变化时,响应执行
computed不支持异步,有异步操作时无法监听数据变化, watch支持异步操作
computed第一次加载时就监听, watch默认第一次加载时不监听
immediate:组件创建时执行与否
immediate:true 第一次加载时监听(默认为false)
deep:深度监听,不推荐使用(非常消耗性能)
监听的属性是对象的话,不开启deep时,对象子属性变化不会触发watch
开启deep后对象内部所有子属性变化都会触发watch
computed中的函数必须调用return, watch不是
4、使用场景
computed: 一个属性受到多个属性的影响,如 购物车商品结算
watch: 一个数据影响多条数据,如:搜索数据
数据变化响应,执行异步操作,或高性能消耗的操作,watch为最佳选择