computed 计算属性 VS method方法
computed计算属性:
作用:封装了一段对于数据的处理,求得一个结果。
语法:
写在computed配置项中
作为属性,直接使用->this.计算属性 {{计算属性}}
methods方法:
作用:给实例提供一个方法,调用业务逻辑。
语法:
写在methods的配置项中
作为方法,需要调用->this.方法名( ){{方法名( )}} @事件名=“方法名”
缓存特性(提升性能)
计算属性会对计算出来的结果缓存,再次使用直接读取缓存,依赖项变化了,会自动重新计算->并且再次缓存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
th {
width: 100px;
height: 20px;
}
td {
text-align: center;
}
h2{
position: relative;
}
span{
position: absolute;
top: -10px;
left:195px;
display: block;
width: 30px;
height: 30px;
border-radius: 25px;
color: #fff;
background-color: orangered;
}
</style>
</head>
<body>
<div id="app">
<h2>小白痴仓库清单🛒<span>{{totalCount}}</span></h2>
<table border="1">
<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>
<br>
总库存量:{{totalCount}}个
</div>
<!-- 引入是开发版本的包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: [{ id: 1, name: '篮球', num: 1 }, { id: 2, name: '足球', num: 6 }, { id: 3, name: '乒乓球', num: 8 }]
},
methods: {
},
//计算
computed: {
totalCount() {
//计算属性:是有缓存的,一旦计算出结果,会立即缓存,下次读取——>直接读取缓存就行
let total = this.list.reduce((sum, item) => sum + item.num, 0)
return total
}
}
})
</script>
</body>
</html>