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

目录

计算属性(面试)

1、计算属性简介

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

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

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

---

计算属性(面试)

1、计算属性简介

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

new Vue({
	el:"",//关联界面元素
	data:{},//vm的数据源
	methods:{},//方法   自己传参数进来
	filters:{qq(){}},//过滤器   
	computed:{xx(){}} //xx就是一个计算属性   自己去取值，不用传参数
	
})

			
{{msg}}
			
方法获取的年龄:{{getAge()}}
			
计算属性获取的年龄:{{getAge_computed}}
			改变birth的值看看年龄变不变
		
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))

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

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

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

methods:{ 
 change(arg,index1){
	 this.arr[index1]=arg
	 this.arr=[...this.arr]
 }
}
computed:{
	total(){
		//eval(this.arr.join("+"))
		//  eval("100+200+88")==>把字符串当做代码运行 产生运算结果
		return  eval(this.arr.join("+"))
		}
	}

	
		
		
				
	
	
		

			
{{birth}}   
			
methods---{{age1(birth)}}
			
computed---{{age}}
			
{{x}}
			change1--{{msg}}
		
		
	

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

	
		
		
		
	
	
		
		

			

				
				菜名：{{el.title}}
				---单价：{{el.price}}---
				-
				{{el.count}}
				+
			
			changemsg--{{msg}}
			
			结算({{total}})元