VUE的计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>计算属性</title>
</head>
<style>
table {
border: 1px solid #000;
text-align: center;
width: 240px;
}
th,td {
border: 1px solid #000;
}
h3 {
position: relative;
}
</style>
<body>
<!-- 计算属性
概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
语法：
1.声明在computed配置项中，一个计算属性对应一个函数。
2.使用起来和普通属性一样使用{{计算属性名}}
computed 计算属性 和 methods方法区别
computed计算属性：
作用：封装了一段对于数据的处理，求得一个结果
语法：写在computed配置项中，作为属性直接使用，this.计算属性{{计算属性}}
重点：
缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会重新计算并再次缓存
计算属性的完整写法
计算属性默认的简写，只能读取访问，不能'修改'，如果要'修改'，需要写计算属性的完整写法
默认写法：
computed:{
计算属性名(){
一段代码逻辑（计算逻辑）
return 结果
}
}
完整写法：获取+设置
computed:{
计算属性名:{
get(){
一段代码逻辑（计算逻辑）
return 结果
},
//当计算属性名被修改赋值时，会执行set
set(修改的值){
一段代码逻辑（修改逻辑）
}
}
}
methods方法：
作用：给实例提供一个方法，调用以处理业务逻辑
语法：写在methods配置项中，作为方法，需要调用，this.方法名（）{{ 方法名（）}} @事件名='方法名'
-->
<div id="app">
<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>礼物总数：{{ totalCount }} 个</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'篮球',num:'1'},
{id:2,name:'足球',num:'3'},
{id:3,name:'网球',num:'5'},
]
},
computed:{
// 计算属性有缓存的，一旦计算出来结果，就会立即缓存
// 下一次读取，直接读缓存就行，性能高
totalCount(){
// 基于现有的数据，编写求值逻辑
// 计算属性函数内部，可以直接通过 this 访问到app实例
// 需求：对 this.list 数组里面的 num进行求和，用reduce
// 0是一个起始值，起始时 0是sum item.num是1，然后依次把数组里面的累加
let total = this.list.reduce((sum,item) => sum + item.num,0)
return total
// let是块作用域，在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实际上其在for循环以外也是可以访问的
// 而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面是不可被访问的
}
}
})
</script>
</body>
</html>