面试题-Vue 中的 computed 和 watch 的区别在哪里

你的名字 2021-08-28 01:57 348阅读 0赞

共同点：

> 都是监听数据变化的方法，用来观察和响应Vue实例上的数据变动。
> 
> 可以将复杂的逻辑放入到计算属性和watch 中，从而使得代码更加整齐，分工明确

不同点：

1.  computed
    
     *  类型：\{ \[key: string\]: Function | \{ get: Function, set: Function \} \}
     *  计算属性将被混入到 Vue 事例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。但是如果使用了箭头函数，那么此时使用 this 就不会指向组件实例了。而且计算的结果是会被**缓存**的，除非依赖的**响应式属性**变化才会重新计算，这无疑在性能上更加友好。
     *  计算属性将变量的 **get 属性重写成了定义的函数方法**，实现了数据劫持。
     *  计算属性可以监听 data 和 props 里的值，只有当被监听的数据发生改变时，才会重新计算，从而得到一个新值。
     *  场景：**一个数据受到多个数据的影响**
2.  watch
    
     *  类型：\{ \[key: string\]: string | Function | Object | Array \}
     *  那这里 key 是咱们要监听的数据，值可以是回调函数，方法名或者对象。同样的如果在watch 中使用箭头函数，则不要使用 this ，因为此时它不会指向 Vue 实例。
     *  会产生一个 watcher 对象，在监视的属性每次变动时**都会触发回调**
     *  监听 data 里的已知变量的变化
     *  场景：**一个数据影响多个数据**

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/ae92c4e1c40f43a0907f4902d0399aff.png