Vue计算属性

计算属性

多次修改时，计算属性比一般情况性能高，最大的特点是会缓存计算结果，只要变量不改变，就不会进行重新计算

<div id="app">
	<!--一般写法，每次都会重新计算-->
	<h1>{{firstname+lastname}}</h1>
	<!--计算属性-->
	<h1>{{fullname}}</h1>
	<!--逆序显示单词-->
	<h1>{{word.split("").reverse().join("")}}</h1>
	<h1>{{reverseword}}</h1>
</div>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			firstname:"张",
			lastname:"三"
		},
		computed:{
			fullname:function(){
				console.log(this)
				//会将计算结果进行缓存，只要this.firstname和lastname变量不改变，就不会进行重新计算
				return this.firstname+this.lastname
			},
			reverseword:function(){
				return this.word.split("").reverse().join("")
			}
		}
	})
</script>

浏览器显示结果

当使用计算属性得到逆序显示时，想要将原来的同样颠倒过来
需要设置set和get属性

computed：{
	reverseMsg：{
		get:function（）{
				return this.msg.split("").reverse（）.join("")   //通过msg的值来得到这个逆序显示的内容
		 },
		set:function(value){
				console.log(value)
				this.msg=value.split("").reverse（）.join("")   //更改msg的值来将原顺序显示改成逆序显示
		 }
	}
},

这时get改变的msg值是已经被set修改过的msg值，如果在控制台通过app.reverseMsg=“good”修改value值，则get内的value也被改变。

当需要循环渲染时，通过计算属性计算出偶数的年龄，缓存起来，提高列表渲染中，显示偶数年龄代码的性能

<div id="app">
	<ul>
		<li v-for="item,index in oddstudents">
			<h3>{{item.studentname}}</h3>
			<h4>{{item.age}}----{{item.school}}</h4>
		</li>
	</ul>
</div>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			students:[
				{
					studentname:"小米",
					age:19,
					school:"内师"
				},
				{
					studentname:"小画",
					age:18,
					school:"内师"
				},
				{
					studentname:"小花",
					age:18,
					school:"内师"
				}
			]
		},
		computed:{
			oddstudents:function(){
				let results=this.students.filter((item,i)=>{
				//只计算这一次
					return item.age%2==0
				})
				return results
			}
		}
	})
</script>

显示