（15）Vue.js 计算属性

泽哥ins

已于 2023-11-13 13:39:38 修改

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-02-04 16:10:25 首次发布

本文链接：https://blog.csdn.net/qq_36213140/article/details/122783608

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

• Vue.js 的视图不建议书写复杂逻辑，这样不利于维护。

封装函数是很好的方式，但有时重复的计算会消耗不必要的性能。

再methods选项中通过调用方法，每调用一次都要计算一次，损耗不必要的性能。

如何提高执行效率？通过将methods选项，替换成computed计算属性的方式。

计算属性使用时为属性形式，访问时会自动执行对应函数。

通过如下示例我们看到，我们调用了3次getResult方法，但是我们的控制台只输出了一次，说明我们的计算属性只执行一次计算，它将第一次的计算结果缓存起来，将来其他的地方再使用的时候，直接拿取第一次计算的结果即可，提高了执行效率。

<!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>20.computed计算属性</title>
</head>
<body>
  <div id="app">
    <!-- <p>{{ getSum() }}</p>
    <p>{{ getSum() }}</p>
    <p>{{ getSum() }}</p> -->
    <p>{{ getResult }}</p>
    <p>{{ getResult }}</p>
    <p>{{ getResult }}</p>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        arr: [1,2,3,4,5]
      },
      methods: {
        getSum() {
          console.log('执行了函数功能');
          var arr = this.arr;
          var sum = 0;
          for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
          }
          return sum;
        }
      },
      computed: {
        getResult() {
          console.log('执行了函数功能');
          var arr = this.arr;
          var sum = 0;
          for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
          }
          return sum;
        }
      }
    })
  </script>
</body>
</html>

总结：methods 与 computed 区别？

• computed 具有缓存型，methods 没有。
• computed 通过属性名访问，methods 需要调用。
• computed 仅适用于计算操作。

对比案例

• 准备一个数组，根据数组数据创建列表。
• 要求：当数据大于10时创建 li，否则不创建。
• 思考以下三种实现方式：
• v-if 与 v-for 结合
• v-for 与 methods 结合
• v-for 与计算属性computed结合

示例1：v-if 与 v-for 结合

不推荐v-if 与 v-for 同时应用于同一个元素，这里不能将v-if写在父元素上，因为我们是筛选操作，筛选大于10的，而不是整体的进行操作。

<body>
  <div id="app">
    <ul>
      <li v-if="item > 10" v-for="item in arr">{{ item }}</li>
    </ul>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        arr: [1,11,2,22,3,33,4,44,5,55]
      }
    })
  </script>
</body>

示例2：v-for 与 methods 结合

这种方式，每调用一次都要计算一次，损耗不必要的性能。

<body>
  <div id="app">
    <ul>
      <li v-for="item in fn()">{{ item }}</li>
    </ul>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        arr: [1,11,2,22,3,33,4,44,5,55]
      },
      methods: {
        fn () {
          console.log('执行了代码');
          //遍历arr ,找到大于10的数据
          var resultArr = [];
          for(var i = 0;i< this.arr.length;i++) {
            if(this.arr[i] > 10) {
              resultArr.push(this.arr[i]);
            }
          }
          return resultArr;
        }
      }
    })
  </script>
</body>

示例3：v-for 与计算属性computed 结合

通过如下示例，我们调用了2次result方法，但是我们的控制台只输出了一次，说明我们的计算属性只执行一次计算，它将第一次的计算结果缓存起来，将来其他的地方再使用的时候，直接拿取第一次计算的结果即可，提高了执行效率。

<body>
  <div id="app">
    <ul>
      <li v-for="item in result">{{ item }}</li>
    </ul>
    <ul>
      <li v-for="item in result">{{ item }}</li>
    </ul>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        arr: [1,11,2,22,3,33,4,44,5,55]
      },
      computed: {
        result() {
          console.log('执行了代码');
          return this.arr.filter(item => item > 10);
        }
      }
    })
  </script>
</body>

泽哥ins

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
（15）Vue.js 计算属性

• Vue.js 的视图不建议书写复杂逻辑，这样不利于维护。• Vue.js 的视图不建议书写复杂逻辑，这样不利于维护。封装函数是很好的方式，但有时重复的计算会消耗不必要的性能。再methods选项中通过调用方法，每调用一次都要计算一次，损耗不必要的性能。如何提高执行效率？通过将methods选项，替换成computed计算属性的方式。计算属性使用时为属性形式，访问时会自动执行对应函数。通过如下示例我们看到，我们调用了3次getResult方法，但是我们的控制台只输出了.
复制链接

扫一扫