在Vue里为什么要使用计算属性_为什么使用计算属性-CSDN博客

本文链接：https://blog.csdn.net/BlankTheMemory/article/details/107448824

坚持学习打卡，要快一点学习Vue了，因为微服务也要加入学习行列了，慢慢变秃，慢慢变强~

今天学习Vue的计算属性，本来还在想，这个计算属性的效果我用方法也可以实现，为什么还要用它？学习之后发现，计算属性优秀的地方在于它的缓存机制，当所依赖的数据不发生改变的时候，可以从缓存里拿值，相比较笨笨的方法来说，可以节约性能，其他有点有待于学习和了解…

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>mao_computed</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script>
			/*给计算属性赋值，学习计算属性的getter和setter方法，为什么要学习计算属性？方法也可以实现相同的功能，
			 这是因为Vue中的计算属性有缓存机制，只要依赖的值不改变，可以从缓存中获取值，但方法必须每次都要调用一次*/
			window.onload = () =>{
				new Vue({
					el:'div',
					data:{
						num:'0'
					},
					//计算属性在这里填写，并非在data里填写
					computed:{
						//如果不进行设置，计算数据默认会有一个getter属性，但没有setter属性
						comp_num:{
							get:function(){
								//如果不进行处理，第二次计算会默认为字符串
								return parseInt(this.num) + 10;
							},
							set:function(value){
								this.num = value;
							}
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div>
			<input type="text" v-model="num"/><br />
			原数据：<h1>{{num}}</h1><br />
			<input type="text" v-model="comp_num" />
			计算后数据：<h1>{{comp_num}}</h1><br />
		</div>
	</body>
</html>