你知道 Vue 中的 watch 和 computd 的区别吗？

你知道 Vue 中的 watch 和 computd 的区别吗？

首先先来说一下基本概念。watch，顾名思义，就是监听，而computed，就是计算属性啦。
那他俩有啥区别嘞？

computed：

• 初始化显示或者相关的 data、props数据变化时调用
• 计算属性不在data中定义，而是依赖data或者props中的数据，重新计算出一个新的值，这个值会根据依赖的已知值的变化而变化
• 在 computed 属性对象中定义计算属性的方法，和取data 对象里的数据属性是一样的，以属性访问的形式调用
• 如果computed 的属性值是一个函数，那么默认会走 get 方法，必须要有一个返回值，函数的返回值就是属性的属性值
• computed 属性默认会缓存计算结果，在重复调用的过程中，只要依赖的数据不变，直接取缓存中的计算结果。只有依赖的数据发生改变，computed才会重新计算
• 在 computed 中，属性都有一个 get 和 set 方法，当数据发生改变时，就调用 set 方法

watch

• 主要是用来监听一些特定数据的变化，从而进行某些具体的业务操作，可以看做是 computed 和 methods 的结合体
• 可以监听的数据来源：有 data、props、computed 内的数据
• watch 支持异步操作
• 不会缓存，监听的数据改变，会直接触发响应的操作
• 监听函数有两个参数，第一个是最新的值，第二个是输入之前的值

主要应用场景：

computed：

• 用于处理比较复杂的逻辑运算；
• 一个数据受一个或者是多个数据影响
• 处理 watch 和 methods 无法处理的，或者是处理起来不方便的情况
• 如：处理模板中的复杂表达式、购物车里面商品总数量和总金额之间的变化关系等

watch：

• 用于处理当一个属性发生变化时，需要执行某些具体的业务逻辑操作
• 在数据变化时执行异步或者开销比较大的操作
• 一个数据改变影响多个数据
• 如：监控路由变化、input 输入框值的特殊处理等