06.computed 与 methods 的区别（以数组为例）

最新推荐文章于 2022-09-08 17:03:15 发布

@司马懿

最新推荐文章于 2022-09-08 17:03:15 发布

阅读量138

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_40406929/article/details/118707138

版权

VUE 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>

<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>

<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      books: [
        {id: 11, name: 'java', price: 112},
        {id: 22, name: 'C++', price: 113},
        {id: 33, name: 'PHP', price: 115},
        {id: 44, name: 'python', price: 116}
      ]
    },
    // computed 模块是有缓存的，也是专门计算属性的一个模块，如果多次使用时，它只会执行一次
    // 而 methods 方法是调用几次它就会执行几次，性能相对computed会更低一点
    // 但是在computed 计算属性时，值发生改变，那么computed会再重新执行一次
    computed: {
      totalPrice:function () {
        let result = 0 ;

        //方式一
        for (le t i = 0; i <this.books.length; i++) {
          result += this.books[i].price
        }
        //方式二
        for (let i in this.books) {
          result += this.books[i].price;
        }
        //方式三
        for (let book of this.books) {
          result += book.price;
        }

        return  result;
      }
    }

  })
</script>
</body>
</html>