computed和watch的区别

最新推荐文章于 2025-10-29 11:07:43 发布

原创最新推荐文章于 2025-10-29 11:07:43 发布 · 192 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

js 同时被 2 个专栏收录

75 篇文章

订阅专栏

vue

49 篇文章

订阅专栏

博客主要介绍了Vue中computed和watch的区别。computed用于计算结果并返回，结果会被缓存，依赖的响应属性变化才重新计算；watch用于监听值的变化，当值改变时执行相关操作，更适合在值变化时做对应操作，如请求后台接口。

computed和watch的区别

computed

计算结果并返回，只有当被计算的属性发生改变时才会触发（即：计算属性的结果会被缓存，除非依赖的响应属性变化才会重新及孙）

watch

监听某一个值，当被监听的值发生变化时，执行相关操作。（与computed的区别是，watch更加适用于监听某一个值得变化，并做对应操作，比如请求后太接口等。而computed适用于计算已有的值并返回结果。）

监听简单数据类型：

data(){
      return{
        'first':2
      }
    },
    watch:{
      first(){
        console.log(this.first)
      }
    },

监听复杂数据类型：

data(){
      return{
        'first':{
          second:0
        }
      }
    },
    watch:{
      secondChange:{
        handler(oldVal,newVal){
          console.log(oldVal)
          console.log(newVal)
        },
        deep:true
      }
    },