提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue.js计算属性和methods的对比

VueJS属性计算 对比 methods
2023-09-27 14:22:47 时间

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>计算属性和methods的对比</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 直接拼接 语法过于繁琐不建议 -->
			<h2>{{firstname+' '+lastname}}</h2>
			<h2>{{firstname}} {{lastname}}</h2>
			<!-- 通过定义methods方法 -->
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<!-- 通过computed计算属性 -->
			<h2>{{FullName}}</h2>
			<h2>{{FullName}}</h2>
			<h2>{{FullName}}</h2>
			<h2>{{FullName}}</h2>
			<h2>{{FullName}}</h2>
			<!-- 这里的FullName不需要加(),因为调用的是一个属性中的get方法 -->
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					firstname:"pangtou",
					lastname:"xiaonaihu"
				},
				// computed:计算机属性()
				computed:{
					// FullName:function() {
					// 	return this.firstname+' '+this.lastname;
					// }
					FullName:{
						set:function(newValue) {
							//一般不会设置set方法，是一个只读属性
							//一般删除Set方法只保留get方法
							// console.log("......",newValue);
							const names = newValue.split(' ');
							this.firstname = names[0];
							this.lastname = names[1];
						},
						get:function() {
							return this.firstname+' '+this.lastname;
						}
					}
				},
				methods:{
					getFullName:function() {
						return this.firstname+' '+this.lastname;
					}
				}
			});
		</script>
	</body>
</html>

自己理解

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用methods方法时，多次调用的时候，每一次都会调用一次该方法，效率低

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用computed计算属性,当多次使用时，该属性只会被调用一次，如果后面的跟前一次一样，直接返回而不会进行重新调用。

相关文章