methods、computed和watch的区别

最新推荐文章于 2023-06-20 19:47:58 发布

沐丶亦

最新推荐文章于 2023-06-20 19:47:58 发布

阅读量179

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/m0_69974492/article/details/124352937

版权

本文详细介绍了Vue.js中的methods、computed和watch的区别。methods用于事件处理，每次调用都会执行；computed作为计算属性，结果会被缓存，只在依赖变化时更新；watch则是用于监听数据变化，包括对路由的监听，并可以执行异步操作，其配置项包括deep、immediate和handler等。

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

methods、computed和watch的区别

一. methods

methods 方法：事件方法，调用一次执行一次，不会缓存结果；

二. computed

computed 计算：计算属性，结果会缓存，只有依赖值发生改变才会去重新计算

三. watch

watch 监听：监听属性 (路由) , 监听数据的变化触发执行函数,也可以进行异步操作

watch 监听数据的变化
watch 有三个参数

deep（是否开启深度监听，针对复杂数据类型） 、
immediate（是否一开始就执行一次handler函数） 、
handler（数据发生改变执行的函数）
注意：当我们不需要 deep 和 immediate 的时候就可以简写为一个函数这个函数就是 handler

 watch: {
    num: {
      deep: true, //深度监听
      immediate: true, //进入页面立刻监听
      handler(newval) {
        console.log(newval);
      },
      //执行函数 参数是newval 和 oldval
    },

    // num() {},
    // 之前写的只有一个函数的情况 是handler的简写 不需要 deep 和 immediate的时候可以简写
  },

watch 监听路由的变化

//监听路由<==>监听 $router
  watch: {
    $route: {
      handler(newval, oldval) {
        console.log(newval, oldval);
      },
    },
  },