vue,js入门（9）计算属性computed

最新推荐文章于 2024-04-12 09:29:11 发布

谢西顾

最新推荐文章于 2024-04-12 09:29:11 发布

阅读量268

点赞数

本文链接：https://blog.csdn.net/yiyiyixin/article/details/80341720

版权

vue.js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

//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（）的括号去掉

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

与methods的区别

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

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

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

谢西顾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue,js入门（9）计算属性computed

//index.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue@
复制链接

扫一扫