vue计算属性和方法的区别

准备

引入vus.js文件

<script src="vue.js"></script>

核心代码

html

<div id="app">
    <div>计算属性  总价格：{{totolprice}}</div>
    <div>方法      总价格: {{totolprice1()}}</div>
</div>

javascript

const app = new Vue({
            el: '#app',
            data: {
              message: '测试',
              books: [{
                id: 111,
                name: '乡土中国',
                price: 120
                 },
                {
                id: 222,
                name: '编程珠玑',
                price: 240
                },
                {
                id: 333,
                name: '从零开始学运营',
                price: 100
                },
                ]
            },
            // 计算属性
          computed: {
            totolprice: function () {
              let result = 0
                for (let i = 0; i < this.books.length; i++) {
                  result += this.books[i].price
                    }
                  console.log("计算属性执行的结果：",result)
                  return result
                }
            },
            // 方法
          methods: {
            totolprice1: function () {
              let result = 0
                for (let i = 0; i < this.books.length; i++) {
                  result += this.books[i].price
                    }
                  console.log("方法执行的结果：",result)
                  return result
                }
            },

        })

输出结果

总结

methods方法和computed计算属性，两种方式的最终结果完全相同
不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
此例中，在计算属性中，只会遍历一次，多次访问计算属性会立即返回之前的计算结果，而不必多次执行函数。从而达到优化渲染效率。
在methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。
总之，对于任何复杂逻辑，优先使用计算属性。

Tags: vue

← v-model结合checkbox类型使用购物车的实现 →

赏

使用支付宝打赏

使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏

扫描二维码，分享此文章