01-计算属性的基本使用

1.1 计算属性

1、在模板中可以直接通过插值语语法显示一些data中的数据
2、但是在某些情况下，我们可能需要对数据进行一些转化后在显示，或者需要将多个数据结合起来进行显示

比如我们有firstName和lastName两个变量，我们需要显示完整的名称
但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}

3、我们可以将上面代码换成计算属性

计算属性是写在实例的computed选项中的

1.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01-计算属性的基本使用</title>
</head>
<body><div id="app"><h2>{{firstName + ' ' + lastName}}</h2><h2>{{firstName}} {{lastName}}</h2><h2>{{getFullName()}}</h2><h2>{{fullName}}</h2>
</div><script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">const vm = new Vue({el: '#app',data: {firstName: 'lin',lastName: 'willen'},computed: {// 不加get，这是计算属性，那么最好以属性命名fullName: function () {return this.firstName + ' ' + this.lastName;}},methods: {getFullName: function () {return this.firstName + ' ' + this.lastName;}}})
</script>
</body>
</html>

1.3 运行结果

在这里插入图片描述

02-计算属性的复杂操作

2.1 代码实战

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02-计算属性的复杂操作</title>
</head>
<body><div id="app"><h2>总价格：{{totalPrice}}</h2>
</div><script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">const vm = new Vue({el: '#app',data: {books:[{id: 1001, name: 'Unix编程艺术',price: 119},{id: 1002, name: '代码大全',price: 105},{id: 1003, name: '深入理解计算机原理',price: 99},{id: 1004, name: '现代操作系统',price: 109}]},computed: {totalPrice: function () {// filter/map/reduce 高级用法let totalPrice = 0;// 用法一for (let i = 0; i < this.books.length; i++) {totalPrice += this.books[i].price;}// 用法二for (let i in this.books) {totalPrice += this.books[i].price;}// 用法三for (let book of this.books) {totalPrice += book.price;}return totalPrice;}}})
</script>
</body>
</html>

2.2 运行结果

在这里插入图片描述

03-计算属性的setter和getter

3.1 计算属性的setter和getter

每个计算属性都包括一个getter和一个setter
语法糖情况下，表示getter，取数据
setter一般不用

3.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>03-计算属性的setter和getter</title>
</head>
<body><div id="app"><h2>{{fullName}}</h2>
</div><script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">const vm = new Vue({el: '#app',data: {firstName: 'lin',lastName: 'willen'},computed: {// 计算属性的本质是个属性，所以Mustache语法不写成fullName()fullName: {set: function (newValue) {console.log('调用了fullName的set方法');const names = newValue.split(' ');this.firstName = names[0];this.lastName = names[1];},get: function () {console.log('调用了fullName的get方法');return this.firstName + ' ' + this.lastName;}},// 大部分情况下set方法不会用到，所以经常用语法糖简写计算属性// fullName: function () {//   return this.firstName + ' ' + this.lastName;// }}})
</script>
</body>
</html>

3.3 运行结果

在这里插入图片描述
Console演示setter方法

04-计算属性和methods的对比

4.1 计算属性的缓存

methods和computed看起来都可以实现我们的功能
那么为什么还要多一个计算属性这个东西呢？
原因：计算属性会进行缓存，如果多次使用,计算属性只会调用一次，极大提高了性能
除非原属性发生改变，才会重新调用计算属性，更改属性值

4.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>04-计算属性和methods的对比</title>
</head>
<body><div id="app"><!--  1.直接拼接:语法过于繁琐--><h2>{{firstName}} {{lastName}}</h2><!--  2.通过定义methods--><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><!--  3.通过computed--><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2>
</div><script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">const vm = new Vue({el: '#app',data: {firstName: 'lin',lastName: 'willen'},methods: {getFullName: function () {console.log('getFullName');return this.firstName + ' ' + this.lastName;}},computed: {fullName: function () {console.log('fullName');return this.firstName + ' ' + this.lastName;}}})
</script>
</body>
</html>