Vue复习8：计算属性 computed
计算属性出现的目的是解决模板中放入过多的逻辑会让模板过重且难以维护的问题。
计算属性是根据data中已有的属性，计算得到一个新的属性。
下面，我们通过一个案例来学一下计算属性
在文本框中输入第一个名字，第二个文本框中输入第二个名字，然后展示全部名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>列表渲染</title>
<style>
.actived {
background-color: #dddddd;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<!-- 这样是模板逻辑变得非常复杂，不易维护 -->
<div>全名：{{firstName + lastName}}</div>
<div>全名：{{fullName}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
},
// 创建计算属性通过computed关键字，它是一个对象
computed: {
// 这里fullName就是一个计算属性，它是一个函数，但这个函数可以当成属性来使用
fullName() {
return this.firstName + this.lastName
}
}
})
</script>
</body>
</html>
了解了计算属性后，下面对用户列表添加一个功能，要求是计算总人数。
可以在ul列表下面添加如下代码。
<p>
总人数：{{users.length+"个"}}
</p>
可能有人没看前面的 列表 所以我把代码复制修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>列表渲染</title>
</head>
<body>
<div id="app">
<ul>
<!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->
<!-- 注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复 -->
<!-- index表示数组的索引值，该名字可以随意定义 -->
<li v-for="(item,index) in users" :key="item.id">
编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
</li>
</ul>
<p>
总人数：{{users.length+"个"}}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
users: [{
id: 1,
name: "张三",
},
{
id: 2,
name: "李四",
},
{
id: 3,
name: "老王",
},
],
},
});
</script>
</body>
</html>
最终真是出了，对应的人数，但是这里在模板中做了运算(在这里做了字符串的拼接，虽然计算简单，但是最好还是通过计算属性来完成)，为了防止在模板中放入过多的逻辑计算，这里可以使用计算属性来解决。
下面对代码进行改造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>列表渲染</title>
</head>
<body>
<div id="app">
<ul>
<!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->
<!-- 注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复 -->
<!-- index表示数组的索引值，该名字可以随意定义 -->
<li v-for="(item,index) in users" :key="item.id">
编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
</li>
</ul>
<p>
<!-- 总人数：{{users.length+"个"}} -->
总人数：{{total}}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
users: [{
id: 1,
name: "张三",
},
{
id: 2,
name: "李四",
},
{
id: 3,
name: "老王",
},
],
},
computed: {
total() {
// 计算属性是有缓存性：如果值没有发生变化，则页面不会重新渲染
return this.users.length + "个";
},
},
});
</script>
</body>
</html>
通过上面的代码，可以看到使用计算属性，让界面变得更加的简洁。
使用计算属性还有一个好处：
其实细心的话就会发现，调用methods里面的方法也能实现和计算属性一样的效果，既然使用methods就可以实现，那么为什么还需要计算属性呢？原因就是计算属性是基于他的依赖荤菜的(所依赖的还是data中的数据)。一个计算属性所依赖的数据发生改变是，他才会重新取值。
也就是说：只要相关依赖没有改变，对此访问计算属性得到的是之前缓存的结果，不会多次执行。
下面我们测试一下：
<p>
<!-- 总人数：{{users.length+"个"}} -->
总人数：{{total}} 总人数：{{total}} 总人数：{{total}}
</p>
在上面的代码中，我们使用了total3次，
下面我们在计算属性中添加一个打印 aaa
computed: {
total() {
console.log("aaa");
// 计算属性是有缓存性：如果值没有发生变化，则页面不会重新渲染
return this.users.length + "个";
},
},
我们运行，按F12查看:
这里我们可以发现只打印了一次 aaa ，因为，第二次，第三次使用total时，发现值没有变化，所以直接从缓存中获取了对应的值。并没有重新计算，这样带来的好处就是，性能得到了提升。
下面我们缓存methods函数的形式来看一下:
<p>
<!-- 总人数：{{users.length+"个"}} -->
<!-- 总人数：{{total}}； 总人数：{{total}}； 总人数：{{total}} -->
总人数：{{getTotal()}}；总人数：{{getTotal()}}；总人数：{{getTotal()}}
</p>
在上面的代码中调用了三次getTotal方法。
getTotal方法的实现如下：
methods: {
getTotal: function () {
console.log("methods");
return this.users.length + "个";
},
},
效果如下：
实现方式差不多的，但是这里却执行了三次。
所以通过上面的案例演示，可以明确的看出计算属性是有缓存的，也就是所依赖的data属性中的数据没有变化，那么是不会从小计算的。所以提升了对应的性能。
所以说，在进行大量耗时的计算的时候，建议使用计算属性来完成。
如下代码：
data: {
selectItem: "",
num: 100
}
在data中定义了num属性，并且初始值为100、
下面在计算属性中进行求和的运算，代码如下：
computed: {
total() {
console.log("aaa");
// 计算属性是有缓存性：如果值没有发生变化，则页面不会重新渲染
// return this.users.length + "个";
let count = 0;
for (let i = 0; i <= this.num; i++) {
count += i;
}
return count;
},
},
我们可以发现计算属性只是在第一次调用的时候，执行了一次，后续由于多以来的数据num没有发生变化，所以即使调用多次，也并没有重新计算，而是获取上次计算的结果，所以说在进行大量耗时计算的时候，通过计算属性可以提升性能。
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
