题目描述：

Vue 中的 computed 和 watch 的区别在哪里

解题：

• 思路一：

• 计算属性是由data中的已知值，得到的一个新值。
• 这个新值只会根据已知值的变化而变化，其他不相关的数据的变化不会影响该新值。
• 计算属性不在data中，计算属性新值的相关已知值在data中。
• 别人变化影响我自己。

• watch：监听数据的变化

• 监听data中数据的变化
• 监听的数据就是data中的已知值

• 我的变化影响别人

• 1.watch擅长处理的场景：一个数据影响多个数据

• 2.computed擅长处理的场景：一个数据受多个数据影响

• 思路二：

• 1、watch就是单纯的是监听某个数据的变化，支持深度监听

• 2、computed是计算属性，是依赖于某个或者某些属性值，只有当依赖的数据发生变化时，才会发生变化；

• 思路三：

• 计算属性，实质就是将变量的get属性重写成了你所定义的那个函数，也就是说实现了数据劫持那一步，无所谓data还是props，都可以作为计算属性函数的依赖值。

• 属性监听，其实也就是观察者模式将变量丢进了观察者收集器当中，变化可以被通知到。

扩展阅读：

• Vue的computed和watch的细节全面分析-思否
• Vue3.0 前的 TypeScript 最佳入门实践
• Vue 项目里戳中你痛点的问题及解决办法