vue的watch和computed的详解

看了很多资料,并且自己也尝试了下,总结下vue中watch和computed这两个方法的具体使用及区别。

1: watch是监听数据的变化,监听data对象中的数据,如果发生变化就会触发watch中对应的同名函数,computed是计算属性。

2: computed支持缓存,当其依赖的属性值发生变化,计算属性就会重新计算,反之则使用缓存中的属性值,watch不支持缓存,当对应的属性发生变化是,就会触发回调执行。

3: computed不支持异步,有异步操作时就无法监听数据变化,watch支持异步操作。

4:watch第一次加载时不触发,后续数据变化的时候才能监听执行到,computed 是第一次加载数据的时候就会监听数据做出变化。

5: watch由于是回调函数,不用return返回数据,computed是计算属性,需要return 来返回数据。

6:使用场景
computed适合一个属性改变受到多个属性的影响,比如购物车的总价计算,选中商品的多少和选中与否都会影响到价格计算,这个时候就比较适合实用computed来作为计算属性来返回计算结果了。
watch适合一个数据影响多条数据的场景,比如搜索数据等。根据数据变化的时候,异步或者同步的去根据数据的变化做出相应。

You May Also Like