computed,watch,methods区别_computed watcch medthods-优快云博客

本文链接：https://blog.youkuaiyun.com/hkduan/article/details/104629427

本文详细解析了Vue.js中computed, watch与methods的功能差异。computed用于基于依赖进行缓存计算，仅在相关数据变化时更新；watch适用于监控特定数据变化并执行复杂操作，如路由监控和输入框值的特殊处理；methods则用于实现业务逻辑，常用于响应用户事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

computed,watch,methods区别
1.computed是计算值变化，指定变量变化了，才执行。如果没有变化就缓存上次的数据。data里面没有这个数据。
计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

2.watch ,一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据
类似methods和computed的结合。
深度监听data:deep:true
immediate:true代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true;
    deep:true
  }
}

watch: {
    changeShowType(value) {
      console.log("-----"+value);
    },
    '$route'(to,from){
      console.log(to);   //to表示去往的界面
      console.log(from); //from表示来自于哪个界面
      if(to.path=="/shop/detail"){
        console.log("商品详情");
      }
    }
  },

3.methods是业务逻辑，当某个条件触发了，才开始执行，比如点击事件。需要经常变动的用methods。如果你需要传参数，就用methods。