计算属性之属性含义详解

最新推荐文章于 2023-07-18 15:34:08 发布

追星星の人

最新推荐文章于 2023-07-18 15:34:08 发布

阅读量862

点赞数 2

分类专栏： Vue

本文链接：https://blog.csdn.net/yuan_21/article/details/106757081

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

计算属性深层次介绍

问题：计算属性在使用的时候为什么只放在双大括号里，不用加括号，就可以直接调用了呢？
答：计算属性部分定义的变量只是一个属性，并不是一个函数，如果你看到这个情况属性名:function(），这只是计算属性定义的一个缩写。计算属性定义时包含set和get两个方法，我们一般不写set方法，这样可以认为定义的计算属性对其他变量的操作是只读的，并不会更改其他变量的值，并且在定义只含有get方法时的计算变量时，可以简写为：属性名:function(）{}。

定义计算属性变量实例

代码介绍：代码中详写了计算属性定义时需要重写的set和get函数，一般可以省略set函数。set方法作用：通过控制台更改代码中totalName的值，并将更改传递到firstName和lastName中；get方法作用：获取firstName和lastName的组合值totalName。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
	<h2>姓名:  {{totalName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
		const app = new Vue({
			el:'#app',//挂载要管理的元素
			data:{
				firstName:'Adobe',
				lastName:'Broud'
			},
			computed:{
				//下面写的为计算属性的完整代码，计算属性一般不写set方法，这时属性为只读属性
				totalName:{
					set:function(newValue){
						const names=newValue.split(' ');
						this.firstName=names[0];
						this.lastName=names[1];						
					},
					get:function(){
						return this.firstName+' '+this.lastName
					}
				}
			},
		})
</script>
</body>
</html>

浏览器运行截图：
在这里插入图片描述浏览器上原本显示结果为：Adobe Broud，经过我手动从控制台修改totalName变量后，显示如上图所示。

计算属性与methods方式区别

表面上看着通过计算属性（computed）和methods方式来计算vue中需要变换的数据值都很简单，可它们在计算效率上却大有不同，通过计算属性计算时会留有数据缓存，当需要计算多次时，如果变量没有变化的话只需计算一次，而通过methods方式则是每调用一次就会计算一次。
代码介绍：目的想要显示5次两个名字的组合值，我分别通过computed和methods方式，并在每个方法中写上在控制台打印。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
	<h5>姓名:  {{totalName}}</h5>
	<h5>姓名:  {{totalName}}</h5>
	<h5>姓名:  {{totalName}}</h5>
	<h5>姓名:  {{totalName}}</h5>
	<h5>姓名:  {{totalName}}</h5>

	<h5>姓名:  {{getTotalName()}}</h5>
	<h5>姓名:  {{getTotalName()}}</h5>
	<h5>姓名:  {{getTotalName()}}</h5>
	<h5>姓名:  {{getTotalName()}}</h5>
	<h5>姓名:  {{getTotalName()}}</h5>
</div>
<script src="../js/vue.js"></script>
<script>
		const app = new Vue({
			el:'#app',//挂载要管理的元素
			data:{
				firstName:'Adobe',
				lastName:'Broud'
			},
			computed:{
				//下面写的为计算属性的完整代码，计算属性一般不写set方法，这时属性为只读属性
				totalName:function(){
					console.log('computed!')
					return this.firstName+' '+this.lastName
				}
			},
			methods:{
				getTotalName:function(){
					console.log('methods!')
					return this.firstName+' '+this.lastName
				}
			}
		})
</script>
</body>
</html>

浏览器运行结果：
在这里插入图片描述

追星星の人

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
计算属性之属性含义详解

计算属性深层次介绍问题：计算属性在使用的时候为什么只放在双大括号里，不用加括号，就可以直接调用了呢？答：计算属性部分定义的变量只是一个属性，并不是一个函数，如果你看到这个情况属性名:function(），这只是计算属性定义的一个缩写。计算属性定义时包含set和get两个方法，我们一般不写set方法，这样可以认为定义的计算属性对其他变量的操作是只读的，并不会更改其他变量的值，并且在定义只含有get方法时的计算变量时，可以简写为：属性名:function(）{}。定义计算属性变量实例代码介绍：代码中
复制链接

扫一扫

专栏目录