• 计算属性的学习

    目录

    一、计算属性的基本使用

    ​ 现在有变量姓氏和名字，要得到完整的名字

    二、计算属性的复杂使用

     ​ 要求计算出所有book的总价格totalPrice。

     用其他方法遍历数据

     1.  forEach

      2.  for in

      3.  for of

      4.  map

      5.  filter

      6.  reduce

      7.  some

    三、计算属性中的getter 和 setter

    四、计算属性和 methods 的对比

    一、计算属性的基本使用

    ​ 现在有变量姓氏和名字，要得到完整的名字

    1. 使用Mastache语法拼接

      {{firstName+ " " + lastName}}

    2. 使用方法methods

      {{getFullName()}}

    3. 使用计算属性computed

      {{fullName}}

    1. DOCTYPE html>
    4.   
    5.   
    6.   
    7.   计算属性的基本使用
    10.   
    11.     
    12.     
      {{firstName+ " " + lastName}}
    13.     
    14.     
      {{getFullName()}}
    15.     
    16.     
      {{fullName}}
    17.

    • 例子中计算属性computed看起来和方法似乎一样，只是方法调用需要使用()，而计算属性不用，方法取名字一般是动词见名知义，而计算属性是属性是名词，但这只是基本使用。 

     

     

    二、计算属性的复杂使用

    现在有一个数组数据books，里面包含许多book对象，数据结构如下：

    books:[
              {id:110,name:"JavaScript从入门到入土",price:119}, 
              {id:111,name:"Java从入门到放弃",price:80},
              {id:112,name:"编码艺术",price:99},
              {id:113,name:"代码大全",price:150},
            ]

     ​ 要求计算出所有book的总价格totalPrice。

    1. DOCTYPE html>
    4.   
    5.   
    6.   
    7.   计算属性的复杂使用
    10.   
    11.  
    12.  
    13.     
      总价格：{{totalPrice}}
    14.  
    15.

    • 效果如下： 

    总价格：448 

     用其他方法遍历数据

     1.  forEach

               totalPrice() {

                            let total = 0;

                            this.books.forEach(item=>{

                                total += item.price

                            })

                            return total  

              }

      2.  for in

                    totalPrice() {

                            let total = 0

                            for (let index in this.books) {

                                total += this.books[index].price

                            }

                            return total

                        }

      3.  for of

                   totalPrice() {

                            let total = 0;

                            for(let item of this.books){

                                total += item.price

                            }

                            return total

                        }

      4.  map

                   totalPrice() {

                            let total = 0;

                            this.books.map(item=>{

                                total += item.price

                            })

                            return total

                        }

      5.  filter

                    totalPrice() {

                            let total = 0;

                            this.books.filter(item=>{

                                total += item.price

                            })

                            return total

                        }

      6.  reduce

                      totalPrice() {

                            return this.books.reduce((total,item)=>{

                                 return total + item.price

                            },0)

                        } 

                       

                      简写

                      totalPrice() {

                            return this.books.reduce((total,item)=>total + item.price,0)

                        } 

      7.  some

                    totalPrice() {

                            let total = 0;

                            this.books.some(item=>{

                                total += item.price

                            })

                            return total

                        }

    三、计算属性中的getter 和 setter

    在计算属性中其实是由这样两个方法setter和getter

          computed: {
            fullName:{
              //计算属性一般没有set方法，只读属性
              set:function(newValue){
                console.log("-----")
                const names = newValue.split(" ")
                this.firstName = names[0]
                this.lastName = names[1]
              },
              get:function(){
                return this.firstName + " " + this.lastName
              }
            }
          }

    ​ 但是计算属性一般没有set方法，只读属性，只有get方法，但是上述中newValue就是新的值，也可以使用set方法设置值，但是一般不用。

     computed 的 getter/setter

    计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的

    1. DOCTYPE html>
    2.     
    3.     
    4.         
    5.         
    6.         
    7.         Vue计算属性的getter和setter
    8.         
    9.     
    10.     
    11.         
    12.             
      计算属性：computed的getter/setter
    13.             
      fullName
    14.             {{fullName}}
    15.             
      firstName
    16.             {{firstName}}
    17.             
      lastName
    18.             {{lastName}}
    19.

    •  初始化

     

     

    - 通过这种方式，我们可以在改变计算属性值的同时也改变和计算属性相关联的属性值。 

    四、计算属性和 methods 的对比

    ​ 直接看代码，分别使用计算属性和方法获得fullName的值。

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<h2>您的fullname是从计算属性中得到:{{fullName}}h2>
    11. 			<h2>您的fullname是从计算属性中得到:{{fullName}}h2>
    12. 			<h2>您的fullname是从计算属性中得到:{{fullName}}h2>
    13. 			<h2>您的fullname是从计算属性中得到:{{fullName}}h2>
    14. 			
    15. 			<h2>您的fullname是从方法中得到:{{getFullName()}}h2>
    16. 			<h2>您的fullname是从方法中得到:{{getFullName()}}h2>
    17. 			<h2>您的fullname是从方法中得到:{{getFullName()}}h2>
    18. 			<h2>您的fullname是从方法中得到:{{getFullName()}}h2>
    19. 		div>
    20. 		<script>
    21. 			const vm = new Vue({
    22. 				el:'#app',
    23. 				data(){
    24. 					return {
    25. 						firstName:'zhang',
    26. 						lastName:'san'
    27. 					}
    28. 				},
    29. 				methods:{
    30. 					getFullName(){
    31. 						console.log('这里调用了方法getFullName');
    32. 						return this.firstName + this.lastName
    33. 					}
    34. 				},
    35. 				computed:{//计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的
    36. 					fullName(){
    37. 						console.log('这里调用了计算属性fullName');
    38. 						return this.firstName + this.lastName
    39. 					}
    40. 				}
    41. 			})
    42. 			
    43. 			/* 总结:计算属性的性能是优于方法的 因为计算属性是具有缓存特性的 */
    44. 		script>
    45. 	body>
    46. html>
    47.

    打印验证时更能体现两种方法的优劣处，methods调用了四次，而计算属性才调用了一次，性能上计算属性明显比methods好。而且在改动firstName的情况下，计算属性只调用一次，methods依然要调用4次。 

    计算属性的性能是优于方法的 因为计算属性是具有缓存特性的

  • 相关阅读:
    精通Git（一）——入门
    BUUCTF easycap 1
    rocketmq4.9 linux安装
    基于bp神经网络汽车自动变速器最佳挡位判断（Matlab代码实现）
    今天你考ACP了没？备考指南即将上线！
    【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit（3）
    Bug排查思路
    Java精进-手写持久层框架
    车载以太网协议学习笔记
    代理配置及多套环境的解决方案
  • 原文地址：https://blog.csdn.net/qq_53841687/article/details/126042230