Vuejs学习笔记(一)-9.使用计算属性

Vue对象中的一个选项，计算属性, computed

该属性和一般方法的区别在于，计算属性是属性，html中各个地方调用计算属性中的方法都是调用存储在内存中计算属性的方法。方法是方法，html中各个地方调用方法中的方法，则需要重新调用方法的次数。

 

知识点1：以下代码中 getFullname()是方法，fullname是属性。属性调用不需要使用括号，方法调用需要使用括号。

知识点2：在Html中调用多个地方调用getFullname()方法，则需要多次使用方法，而html中多个地方调用计算属性，在控制台中检查，其实值调用了一次，其他调用时使用的是内存中的存储，节省了性能。

 

 代码如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 01-计算属性的基本使用.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 23:15
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>01-计算属性的基本使用</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <h2>{{name + ' ' + nick}}</h2>
21   <!--  拼接展示太麻烦，可以使用函数进行包装-->
22   <h2>{{getFullname()}}</h2>
23   <h2>{{getFullname()}}</h2>
24   <h2>{{getFullname()}}</h2>
25   <h2>{{getFullname()}}</h2>
26   <!--  使用函数包装但无法解决性能问题，每次调用都要再次调用getFullname()方法，而使用计算属性，可以将属性存在缓存中，无需多次调动，-->
27   <h2>{{fullname}}</h2>
28   <h2>{{fullname}}</h2>
29   <h2>{{fullname}}</h2>
30   <h2>{{fullname}}</h2>
31   <h2>{{fullname}}</h2>
32 </div>
33 <script src="../js/vue.js"></script>
34 <script>
35   const app = new Vue({
36     el: '#app',
37     data: {
38       message: 'hello',
39       name: 'invoker',
40       nick: 'kaer'
41     },
42     // 使用计算属性,在console控制台中查看，computed只会调用一次
43     computed:{
44       fullname() {
45         console.log('调用计算属性');
46         return this.name + ' ' + this.nick
47       }
48     },
49     methods: {
50       getFullname() {
51         console.log('调用方法');
52         return this.name + ' ' + this.nick
53       }
54     }
55   })
56 </script>
57 </body>
58 </html>

 知识点3.计算属性的场景：

页面上需要根据后台数据实时显示的值，不需要频繁调用方法，此时可以用到计算属性，下面的例子是计算图书总价：

 

 

代码如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 02-计算属性引用场景.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/1 9:13
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>02-计算属性应用场景</title>
16 </head>
17 <body>
18 <div id="app">
19 <!--  <h2>{{ message }}</h2>-->
20   <h2>totalPrice:{{totalPrice}}</h2>
21   <h2>totalPrice2:{{totalPrice2}}</h2>
22   <h2>totalPrice3:{{totalPrice3}}</h2>
23 
24 </div>
25 
26 <script src="../js/vue.js"></script>
27 <script>
28 
29   const app = new Vue({
30     el: '#app',
31     data: {
32       message: 'hello',
33       books: [
34         {id: 1, name: 'python', price: 38},
35         {id: 2, name: 'fastapi', price: 49},
36         {id: 3, name: 'vuejs', price: 59},
37         {id: 4, name: 'pandas', price: 39}
38       ]
39     },
40     // 界面上的总价格需要实时变化，可以使用计算属性
41     computed: {
42       totalPrice() {
43         let totalPrice = 0
44         for (let i = 0; i < this.books.length; i++) {
45           totalPrice += this.books[i].price
46         }
47         return totalPrice
48       },
49       totalPrice2() {
50         let totalPrice = 0
51         for (book of this.books) {
52           totalPrice += book.price
53         }
54         return totalPrice
55       },
56       totalPrice3(){
57         let totalPrice = 0
58         for (let i in this.books){
59           totalPrice+=this.books[i].price
60         }
61         return totalPrice
62       }
63     }
64   })
65 </script>
66 </body>
67 </html>

知识点4：计算属性写法的演变，以下代码由fullname--->fullname2------>fullname3进行演变，fullname3最简洁。

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 03-计算属性的setter和getter.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/1 9:42
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>03-计算属性的setter和getter</title>
16 </head>
17 <body>
18 <div id="app">
19   <!--  <h2>{{ message }}</h2>-->
20   <h2>计算属性1:{{fullname}}</h2>
21   <h2>计算属性2:{{fullname2}}</h2>
22   <h2>计算属性3:{{fullname3}}</h2>
23 </div>
24 
25 <script src="../js/vue.js"></script>
26 <script>
27 
28 
29   const app = new Vue({
30     el: '#app',
31     data: {
32       message: 'hello',
33       name: 'invoker',
34       nick: 'kaer'
35     },
36     computed: {
37       fullname: {
38         set: function () {
39           //计算属性一般不希望使用set方法
40         },
41         get: function () {
42           return this.name + '就是' + this.nick
43         }
44       },
45       fullname2: {
46         get: function () {
47           return this.name + '就是' + this.nick
48         }
49       },
50       fullname3() {
51         return this.name + '就是' + this.nick
52       }
53       // 以上fullname,fullname2,fullname3三种写法结果一致。第三种方法最简洁。
54     }
55   })
56 </script>
57 </body>
58 </html>

 以下是实现计算属性的set方法代码

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 03-计算属性的setter和getter.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/1 9:42
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>03-计算属性的setter和getter</title>
16 </head>
17 <body>
18 <div id="app">
19   <!--  <h2>{{ message }}</h2>-->
20   <h2>计算属性1:{{fullname}}</h2>
21   <h2>计算属性2:{{fullname2}}</h2>
22   <h2>计算属性3:{{fullname3}}</h2>
23 </div>
24 
25 <script src="../js/vue.js"></script>
26 <script>
27 
28 
29   const app = new Vue({
30     el: '#app',
31     data: {
32       message: 'hello',
33       name: 'invoker',
34       nick: 'kaer'
35     },
36     computed: {
37       fullname: {
38         set: function (newname) {
39           //计算属性一般不希望使用set方法，但是可以实现set方法
40           const names = newname.split(' ')
41           this.name=names[0]
42           this.nick=names[1]
43         },
44         get: function () {
45           return this.name + '就是' + this.nick
46         }
47       },
48       fullname2: {
49         get: function () {
50           return this.name + '就是' + this.nick
51         }
52       },
53       fullname3() {
54         return this.name + '就是' + this.nick
55       }
56       // 以上fullname,fullname2,fullname3三种写法结果一致。第三种方法最简洁。
57     }
58   })
59 </script>
60 </body>
61 </html>

 

posted @ 2021-06-30 23:43  kaer_invoker  阅读(161)  评论(0)  编辑  收藏  举报