vue,js入门(9)计算属性computed

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
	
	<button @click="a++">a加</button>
	<button @click="b++">b加</button>
	{{ aage() }}
	{{ bage() }}
	{{ cage() }}
	
</div>
	<script src="app.js"></script>
</body>

//app.js

new Vue({
	el:"#vue-app",
	data:
	{	
		a:0,
		b:0,
		age:10,
	},
	
	methods:
	{
		aage:function(){
			console.log("a++");
			return this.a+this.age;
			
			},
		bage:function()
		{
			console.log("b++");
			return this.b+this.age;
			
		},
		cage:function()
		{
			console.log("ab++");		
		}
	}
});

运行效果


控制台显示效果

发现,虽然点的只有a加这个按钮,但可以发现所有的函数都执行了,methods的方法一旦被触发,所有方法都会被触发,所以相对来说,耗费性能,这个时候就运用computed


使用computed,对于js文件,只需把methods改成computed,对于html文件,则把函数aage(),bage()的括号去掉

{{ aage }}{{ bage }} {{ cage}}

会自动去的computed寻找是否有该名字


与methods的区别

相同点:两者最后达到的效果是相同的

不同点:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变,只会返回之前的结果,不再执行函数。

也就是说,如果这里的按钮的v-on不是a++而只是a,b++只是b,点击按钮,控制台是一片空白的

阅读更多
上一篇vue.js(8)双向数据绑定
下一篇vue.js入门(10)动态绑定css样式
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭