• Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性 函数什么情况下调用、案例）

    目录

    计算属性(面试)

    1、计算属性简介

    2、计算属性和方法的区别:(面试)

    3、关于计算属性 函数什么情况下调用​​​​​​​

    4、案例：购物车页面计算总价

    计算属性(面试)

    1、计算属性简介

    把computed中的方法当做属性使用,会返回一个数据供使用:

    1. new Vue({
    2. 	el:"",//关联界面元素
    3. 	data:{},//vm的数据源
    4. 	methods:{},//方法   自己传参数进来
    5. 	filters:{qq(){}},//过滤器   
    6. 	computed:{xx(){}} //xx就是一个计算属性   自己去取值，不用传参数
    7. 	
    8. })
    1. "app">
    2. 			<p>{{msg}}p>
    3. 			<p>方法获取的年龄:{{getAge()}}p>
    4. 			<p>计算属性获取的年龄:{{getAge_computed}}p>
    5. 			<button @click="change">改变birth的值看看年龄变不变button>
    6.
  • new Vue({
  • el: "#app",
  • data: {
  • msg: "hello",
  • birth: "1995-02-03"
  • },
  • methods: {
  • getAge() {
  • var age = new Date().getFullYear() - new Date(this.birth).getFullYear()
  • return age + "岁"
  • },
  • change() {
  • this.birth = "1996-02-03"
  • this.xx=200 //方法中的函数可以使用下面的computed中的属性
  • }
  • },
  • computed:{
  • //计算属性第一种用法，会先去判断使用的数据源，变了没有，没有变就不会重新运行
  • getAge_computed(){ //函数方法
  • var age = new Date().getFullYear() - new Date(this.birth).getFullYear()
  • return age + "岁"
  • }
  • //计算属性第二种用法
  • xx:{ //属性
  • set(oldvalue){}, //设置
  • get(){} //获取 只有当里面的数据改变了，才会执行get
  • }
  • }
  • })

    • 2、计算属性和方法的区别:(面试)

    计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算，
    提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性


    methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍 
    方法常常是作用的事件使用,计算属性常常是动态计算结果时使用

    （刷新页面：模板重新渲染、重新取值）

    3、关于计算属性 函数什么情况下调用

    计算属性使用时当做属性使用
    计算属性设计时当做函数设计(就像es6中的属性)
    当计算属性的函数中使用到的data中的数据发生变化时,计算属性就会重新执行并刷新UI


    1.如果是修改了data中监听的某个的属性值 计算属性就会运行


    2.如果是修改了data中监听的某个属性值内部的数据,计算属性就不会重新运行
    比如:计算属性使用的是data中的一个数组,某个交互把数组内部的某个下标的值改了,但是这个数组没有改变,就不会触发计算属性


    3.解决2的办法1:把修改后的数组重新赋值给data,让引用发生变化,来触发计算属性
    3.解决2的办法2:赋值 JSON.parse(JSON.stringfy(data))

    （计算属性就是处理数据源中的数据，然后用于渲染，而且会监听计算属性中使用到的数据源，然后把计算的结果，缓存

    如果监听的数据源发生了变化，才会重新计算，否则直接使用缓存的数据）

    缺点：如果简单的运算也用计算属性，反而会增加资源消耗（计算属性会监听计算的值，而且会缓存计算的结果），比如：生日转年龄的时候，可以用过滤器

    1. methods:{ 
    2.  change(arg,index1){
    3. 	 this.arr[index1]=arg
    4. 	 this.arr=[...this.arr]
    5.  }
    6. }
    7. computed:{
    8. 	total(){
    9. 		//eval(this.arr.join("+"))
    10. 		//  eval("100+200+88")==>把字符串当做代码运行 产生运算结果
    11. 		return  eval(this.arr.join("+"))
    12. 		}
    13. 	}

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js">script>		
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<h1>{{birth}}   h1>
    11. 			<p>methods---{{age1(birth)}}p>
    12. 			<p>computed---{{age}}p>
    13. 			<p>{{x}}p>
    14. 			<button @click="change1">change1--{{msg}}button>
    15. 		div>
    16. 		<script>
    17. 			//刷新页面==>模板重新渲染 重新取值
    18. 			var vm=new Vue({
    19. 				el:"#app",				//关联模板的选择器
    20. 				data:{				//数据源
    21. 					birth:"1996-02-03",
    22. 					msg:"hello"
    23. 				},
    24. 				methods:{				//方法
    25. 					change1(){
    26. 						this.msg="6666"
    27. 						this.birth=this.birth
    28. 						this.x=30
    29. 					},
    30. 					age1(str){
    31. 						console.log("方法")
    32. 						return new Date().getFullYear()- new Date(str).getFullYear()
    33. 					}
    34. 				},
    35. 				filters:{},				//过滤器
    36. 				computed:{				// 计算属性
    37. 					age(){
    38. 						console.log("计算属性")
    39. 						return new Date().getFullYear()- new Date(this.birth).getFullYear()
    40. 					},
    41. 					x:{
    42. 						get(){
    43. 							console.log(this,11111)
    44. 							return new Date().getFullYear()- new Date(this.birth).getFullYear()+"岁"
    45. 						},
    46. 						set(v){
    47. 							console.log(v)
    48. 							this.birth=`${2022-v}-02-03`
    49. 						}
    50. 					}
    51. 				}
    52. 			})
    53. 		script>
    54. 	body>
    55. html>

    4、案例：购物车页面计算总价

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		<style type="text/css">
    10. 			img {
    11. 				width: 30px;
    12. 				height: 30px;
    13. 			}
    14. 		style>
    15. 		<div id="app">
    16. 			<div v-for="(el,index) in arr" :key="el.id">
    17. 				<img :src="el.url">
    18. 				菜名：<span>{{el.title}}span>
    19. 				---单价：{{el.price}}---
    20. 				<button @click="subbtn(index)">-button>
    21. 				<span>{{el.count}}span>
    22. 				<button @click="addbtn(index)">+button>
    23. 			div>
    24. 			<button @click="changemsg">changemsg--{{msg}}button>
    25. 			
    26. 			<button>结算({{total}})元button>
    27. 		div>
    28. 		<script>
    29. 			new Vue({
    30. 				el: "#app",
    31. 				methods:{
    32. 					changemsg(){
    33. 						this.msg="666"
    34. 					},
    35. 					subbtn(index){
    36. 						console.log(index,this.arr[index])
    37. 						this.arr[index].count--
    38. 						if(this.arr[index].count==-1){
    39. 							// console.log(111,index,this.arr.length)
    40. 							console.log(123)
    41. 							this.arr.splice(index,1)
    42. 						    if(this.arr.length==0){
    43. 								this.arr=[]
    44. 								return 
    45. 							}
    46. 						}
    47. 						// console.log(123,index,this.arr.length)
    48. 						Vue.set(this.arr,0,this.arr[0])
    49. 					},
    50. 					addbtn(index){
    51. 						this.arr[index].count++
    52. 						Vue.set(this.arr,0,this.arr[0])
    53. 					}
    54. 				},
    55. 				computed:{
    56. 					total(){
    57. 						console.log("computed计算了总价")
    58. 						let n=this.arr.reduce((n1,n2)=>{
    59. 							return n1+n2.price*n2.count
    60. 						},0)
    61. 						return n
    62. 					}
    63. 				},
    64. 				data: {
    65. 					msg:"hello",
    66. 					arr: [{
    67. 							id: 12123,
    68. 							title: "鱼香肉丝",
    69. 							price: 18,
    70. 							count: 2,
    71. 							url: "./img/3.jpg"
    72. 						},
    73. 						{
    74. 							id: 12124,
    75. 							title: "鱼香肉丝2",
    76. 							price: 15,
    77. 							count: 1,
    78. 							url: "./img/4.jpg"
    79. 						},
    80. 						{
    81. 							id: 12126,
    82. 							title: "鱼香肉丝3",
    83. 							price: 123,
    84. 							count: 2,
    85. 							url: "./img/5.jpg"
    86. 						},
    87. 						{
    88. 							id: 12128,
    89. 							title: "鱼香肉丝4",
    90. 							price: 15,
    91. 							count: 3,
    92. 							url: "./img/9.jpg"
    93. 						},
    94. 						{
    95. 							id: 12120,
    96. 							title: "鱼香肉丝5",
    97. 							price: 12,
    98. 							count: 5,
    99. 							url: "./img/10.jpg"
    100. 						}
    101. 					]
    102. 				}
    103. 			})
    104. 		script>
    105. 	body>
    106. html>
  • 相关阅读:
    C语言程序编译过程中自动添加编译时间等相关信息
    化工集团数字化转型新契机双重预防机制数字化建设
    redis 连接打满的解决
    C# 之 选择并调用文件[winform]
    跨平台下移动应用的开发框架对比与分析
    C++ Lambda表达式
    MATLAB程序设计与应用 3.2 矩阵变换
    使用FPGA实现逐级进位加法器
    python线程、协程
    Qt之mouseMoveEvent不点击鼠标也能捕获鼠标位置
  • 原文地址：https://blog.csdn.net/qq_52301431/article/details/126635982