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

本文链接：https://blog.csdn.net/qq_52301431/article/details/126635982

计算属性(面试)

1、计算属性简介

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

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

<div id="app">
			<p>{{msg}}</p>
			<p>方法获取的年龄:{{getAge()}}</p>
			<p>计算属性获取的年龄:{{getAge_computed}}</p>
			<button @click="change">改变birth的值看看年龄变不变</button>
		</div>
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("+"))
		}
	}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>		
	</head>
	<body>
		<div id="app">
			<h1>{{birth}}   </h1>
			<p>methods---{{age1(birth)}}</p>
			<p>computed---{{age}}</p>
			<p>{{x}}</p>
			<button @click="change1">change1--{{msg}}</button>
		</div>
		<script>
			//刷新页面==>模板重新渲染 重新取值
			var vm=new Vue({
				el:"#app",				//关联模板的选择器
				data:{				//数据源
					birth:"1996-02-03",
					msg:"hello"
				},
				methods:{				//方法
					change1(){
						this.msg="6666"
						this.birth=this.birth
						this.x=30
					},
					age1(str){
						console.log("方法")
						return new Date().getFullYear()- new Date(str).getFullYear()
					}
				},
				filters:{},				//过滤器
				computed:{				// 计算属性
					age(){
						console.log("计算属性")
						return new Date().getFullYear()- new Date(this.birth).getFullYear()
					},
					x:{
						get(){
							console.log(this,11111)
							return new Date().getFullYear()- new Date(this.birth).getFullYear()+"岁"
						},
						set(v){
							console.log(v)
							this.birth=`${2022-v}-02-03`
						}
					}
				}
			})
		</script>
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
	</head>
	<body>
		<style type="text/css">
			img {
				width: 30px;
				height: 30px;
			}
		</style>
		<div id="app">
			<div v-for="(el,index) in arr" :key="el.id">
				<img :src="el.url">
				菜名：<span>{{el.title}}</span>
				---单价：{{el.price}}---
				<button @click="subbtn(index)">-</button>
				<span>{{el.count}}</span>
				<button @click="addbtn(index)">+</button>
			</div>
			<button @click="changemsg">changemsg--{{msg}}</button>
			
			<button>结算({{total}})元</button>
		</div>
		<script>
			new Vue({
				el: "#app",
				methods:{
					changemsg(){
						this.msg="666"
					},
					subbtn(index){
						console.log(index,this.arr[index])
						this.arr[index].count--
						if(this.arr[index].count==-1){
							// console.log(111,index,this.arr.length)
							console.log(123)
							this.arr.splice(index,1)
						    if(this.arr.length==0){
								this.arr=[]
								return 
							}
						}
						// console.log(123,index,this.arr.length)
						Vue.set(this.arr,0,this.arr[0])
					},
					addbtn(index){
						this.arr[index].count++
						Vue.set(this.arr,0,this.arr[0])
					}
				},
				computed:{
					total(){
						console.log("computed计算了总价")
						let n=this.arr.reduce((n1,n2)=>{
							return n1+n2.price*n2.count
						},0)
						return n
					}
				},
				data: {
					msg:"hello",
					arr: [{
							id: 12123,
							title: "鱼香肉丝",
							price: 18,
							count: 2,
							url: "./img/3.jpg"
						},
						{
							id: 12124,
							title: "鱼香肉丝2",
							price: 15,
							count: 1,
							url: "./img/4.jpg"
						},
						{
							id: 12126,
							title: "鱼香肉丝3",
							price: 123,
							count: 2,
							url: "./img/5.jpg"
						},
						{
							id: 12128,
							title: "鱼香肉丝4",
							price: 15,
							count: 3,
							url: "./img/9.jpg"
						},
						{
							id: 12120,
							title: "鱼香肉丝5",
							price: 12,
							count: 5,
							url: "./img/10.jpg"
						}
					]
				}
			})
		</script>
	</body>
</html>