专题 | computed methods与watch

快乐的高兴的学习代码中

已于 2022-10-05 22:45:21 修改

阅读量148

点赞数

分类专栏：详细知识文章标签： vue.js

于 2022-06-15 21:54:07 首次发布

本文链接：https://blog.csdn.net/a123pplequeen/article/details/125305332

版权

详细知识专栏收录该内容

45 篇文章 2 订阅

订阅专栏

本文介绍了Vue.js中methods、computed和watch的区别和应用场景。methods不缓存，每次调用都会执行计算；computed属性会缓存结果，适用于多次使用的计算值；watch主要用于监听单个数据变化。案例展示了currentTime1和currentTime2的实时时间更新，凸显了methods和computed的差异。

摘要由CSDN通过智能技术生成

methods方式数据不会缓存，每次加载到页面上都需要重新计算

watch:有两个值，新值和旧值

computed值会缓存，

methods只适合用于业务逻辑处理，数据不会缓存

watch只适合监听单个数据

computed适合监听多个数据，可以缓存计算的值方便下次使用

案列1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
  <p>currentTime1:{{currentTime1()}}</p>
  <p>currentTime2:{{currentTime2}}</p>
  </div>
  <script>
     var vm=new Vue({
      el:"#app",
      data:{
        message:"pan"
      },
      methods:{
        currentTime1:function(){
          return Date.now();
        }
      },
      computed:{
        currentTime2:function(){
          this.message;
          return Date.now();
        }
      }
     })
  </script>
</body>
</html>