Vuejs学习笔记，Vue中方法methods 和计算属性computed的区别

最新推荐文章于 2022-10-15 08:27:23 发布

C_阿乐

最新推荐文章于 2022-10-15 08:27:23 发布

阅读量302

点赞数 3

分类专栏： Vuejs 文章标签： methods computed计算属性

本文链接：https://blog.csdn.net/weixin_45806357/article/details/103082982

版权

Vuejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

方法methods 和计算属性computed的区别对比

1.从功能上看methods 和computed是一样的，那为什么还要有一个计算属性呢？

2.原因就是因为计算属性会进行缓存，如果多次使用时，计算属性只会调用一次

3.methods则会调用多次

HTML部分

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- methods 调用4次 会每次重新计算一次-->
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
		</div>
	</body>
</html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- computed 1.计算属性只调用一次-->
			<!-- 2.计算属性调用的是属性所以只书写属性名不用加（）-->
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
		</div>
	</body>
</html>

Vuejs部分

let vue = new Vue({
		el: '#app',
		data: {
			firstName: 'Jackson',
			lastName: 'Yee'
		},
		methods: { // 方法
			getFullName () {
				console.log('getFullName')
				// 打印结果调用了 4次 
				return this.firstName + ' ' +this.lastName
			}
		},
		computed: { // 计算属性
			fullName () {
				console.log('fullName')
				// 打印结果只调用了 一次 fullName
				return this.firstName + ' ' + this.lastName
			}
		}
	})

1.使用methods调用的打印展示

methods中的方法多次调用便打印了多次
methods打印

2.使用computed计算属性的调用打印展示

computed计算属性中的方法只调用了一次便只打印了一次
此图为computed计算属性打印

总结：

1.为什么methods方法会掉用多次？因为没有进行缓存，所以多次使用时就会多次调用；
2.为什么computed计算属性只会调用一次？因为有进行了缓存，如果使用多次时，只会调用一次。
3.除非一些需要使用methods方法的再特别使用，一般情况使用computed计算属性来写方法回调

C_阿乐

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs学习笔记，Vue中方法methods 和计算属性computed的区别

方法methods 和计算属性computed的区别对比1.从功能上看methods 和computed是一样的，那为什么还要有一个计算属性呢？2.原因就是因为计算属性会进行缓存，如果多次使用时，计算属性只会调用一次3.methods则会调用多次HTML部分<html> <head> <meta charset="utf-8"> <ti...
复制链接

扫一扫

专栏目录