计算属性与methods的对比

最新推荐文章于 2024-09-09 11:08:24 发布

谷歌玩家

最新推荐文章于 2024-09-09 11:08:24 发布

阅读量817

点赞数 1

分类专栏： vue/cli 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43539854/article/details/121411665

版权

vue/cli 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在某些时候，调用methods和计算属性达到的效果是一样的，那么他们到底有什么区别呢？

<!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">
  <script src="../../js/vue.js"></script>
  <title>计算属性和methods的对比</title>
</head>

<body>
  <div id="app">
    <!-- 调用计算属性 -->
    <h2>{{getFullName}}</h2>
    <h2>{{getFullName}}</h2>
    <h2>{{getFullName}}</h2>
    <h2>{{getFullName}}</h2>

    <!-- 调用methods -->
    <h2>{{FullName()}}</h2>
    <h2>{{FullName()}}</h2>
    <h2>{{FullName()}}</h2>
    <h2>{{FullName()}}</h2>
  </div>
  <script type="text/javascript">
    const app = new Vue({
      el: '#app',
      data() {
        return {
          firstName: "刘",
          lastName: "帅武",
        };
      },
      computed: {
        getFullName() {
          console.log("getFullName");
          return this.firstName + this.lastName
        },
      },
      methods: {
        FullName() {
          console.log("FullName");
          return this.firstName + this.lastName
        },
      },
    });
  </script>

  <style scoped>

  </style>

</body>

</html>

在这里插入图片描述

可以看到最终methods被调用了4次，计算属性只被调用1次，因此计算属性的效率比methods高。计算属性在调用的变量没有发生变化时会被Vue缓存起来，下次调用时会直接在缓存中调用，只有在计算属性调用的变量发生变化时才会重新执行。

谷歌玩家

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性与methods的对比

在某些时候，调用methods和计算属性达到的效果是一样的，那么他们到底有什么区别呢？<!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, init
复制链接

扫一扫

专栏目录