【Vue】computed 计算属性 VS methods 方法

本文主要是介绍【Vue】computed 计算属性 VS methods 方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

一、computed 计算属性
二、methods 方法

一、computed 计算属性

作用：封装了一段对于数据的处理，求得一个结果，而且还可以拿这个结果去缓存。

语法：

① 写在 computed 配置项中

② 作为属性，直接使用 → this.计算属性、{{ 计算属性 }}

优势：计算属性的优势

缓存特性（提升性能）：

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

依赖项变化了，会自动重新计算 → 并再次缓存

二、methods 方法

作用：给实例提供一个方法，调用以处理业务逻辑。

语法：

① 写在 methods 配置项中

② 作为方法，需要调用 → this.方法名()、 {{ 方法名() }}、 @事件名="方法名"

<body><div id="app"><h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3><h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3><h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3><h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}个</td></tr></table><!-- 方法是需要调用的，记得加() --><p>礼物总数：{{ totalCountFn() }} 个</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 现有的数据list: [{ id: 1, name: '篮球', num: 3 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},// 方法更偏向于处理业务methods: {totalCountFn() {console.log('methods方法执行了') // 引用了多少次就打印多少次let total = this.list.reduce((sum, item) => sum + item.num, 0)return total}},// 计算属性更偏向于求得值computed: {// 计算属性：有缓存的，一旦计算出来结果，就会立刻缓存// 下一次读取 → 直接读缓存就行 → 性能特别高totalCount () {console.log('计算属性执行了') // 只打印一次let total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>
</body>