Vue中computed和watch的区别

💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴， 请点击【前端学习交流群】

目录

1.computer计算属性

2.watch属性监听

区别：

---

1.computer计算属性

1. computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行。
2. computed中的函数必须用return返回。
3. 它支持缓存，只有依赖的数据发生了变化，才会重新计算
4. 不支持异步，当Computed中有异步操作时，无法监听数据的变化
5. computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
6. 当computed中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。
7. 如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。

使用场景：使用场景：当一个值受多个属性影响的时候-------购物车商品结算（多个属性加起来求和）

2.watch属性监听

• watch中的函数名称必须要和data中的属性名一致，因为watch是依赖data中的属性，当data中的属性发生改变的时候，watch中的函数就会执行。
• watch中的函数有两个参数，前者是newValue，后者是oldValue。
• watch中的函数是不需要调用，它不支持缓存，数据变化时，它就会触发相应的操作
• 支持异步监听
• 监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数：

1.         immediate：组件加载立即触发回调函数
2.         deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。

　　使用场景：当一条数据的更改影响到多条数据的时候--------搜索框

区别：

        1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

　　2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

　　3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

       4、computed能完成的功能，watch都可以完成。

       5、 watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。