Vue初学——计算属性Computed和Methods

最新推荐文章于 2024-04-01 11:11:37 发布

尖兵果子

最新推荐文章于 2024-04-01 11:11:37 发布

阅读量2k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wfy17030212/article/details/121955298

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文对比了Vue中computed和methods的区别，指出computed计算属性仅在创建时执行一次，适合频繁调用的场景，而methods每次实例化都会执行，适用于少次调用。通过示例代码验证了两者执行次数的不同。

摘要由CSDN通过智能技术生成

methods

methods是一个vue对象中的属性,而在这个属性中，写的是种种要实现的方法.

computed

computed是一个属性，在属性中写的也是要实现的方法，那其中同方法一样的写法，总是让人觉得这里面要调用计算属性中的一个成员要用方法的形式，但实际上不用这样

那么问题就来了，既然这两个的作用都一样，那么有什么区别呢

computed在创建后只会调用一次其中的函数，而methods只要你每创建一个,就会调用一个,那么执行方法也需要不少时间,如果是只要调一两次方法倒还好说，如果有上百个次，那么它们的差异就不言而喻了。

接下来验证下它们的差异

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
		</div>
	</body>
	<script type="text/javascript">
		let computed_count=1,methods_count=1;
		var vm=new Vue({
			el:'#app',
			data:{
				firstname:'Sherlock',
				lastname:'Holmes',
			},
			computed:{
				fullName()					
				{
					console.log('computed_times='+computed_count);
					computed_count++;
					return this.firstname+' '+this.lastname;
				}
			},
			methods:{
				getFullName()					
				{
					console.log('methods_times='+methods_count);
					methods_count++;
					return this.firstname+' '+this.lastname;
				}
			}
		});
	</script>
</html>