Vue2.6-方法侦听器计算属性

最新推荐文章于 2023-12-01 15:50:40 发布

置顶东陵十三

最新推荐文章于 2023-12-01 15:50:40 发布

阅读量189

点赞数 1

分类专栏：计算机前端开发文章标签： Vue2.6 计算属性侦听器逻辑计算

本文链接：https://blog.csdn.net/donglingjiu/article/details/100520933

版权

计算机同时被 3 个专栏收录

110 篇文章 0 订阅

订阅专栏

开发

73 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

很多时候需要在视图中渲染的数据是通过已经定义的多个变量通过逻辑计算返回的结果

如已经定义 firstName lastName 现在需要渲染 fullName = firstName + lastName 的结果

实现方法有多种：

watch(侦听器)和computed(计算属性)都具备缓存机制但是相比较 watch需要侦听大量依赖 computed相比简洁

所以如果一个功能如果可用以下多种方法实现优先推荐 computed 语法简洁性能也高

一. 插值表达式中包含计算逻辑(模板以显示为主包含计算逻辑不推荐)

<div id='app'>
{{firstName + ' ' + lastName + ' ' + age}} <br />
</div>

二.自定义方法

<body>
		<div id='app'>
			{{fullName()}} &nbsp; {{age}}
		</div>

		<script>
			var app = new Vue({
				el:"#app" ,
				data:{
					firstName:'Robert',
					lastName: 'Downey' ,
					age: 18 
				},
				methods:{
					fullName:function() {
						console.log('计算了一次') ;
						return this.firstName + ' ' + this.lastName ;
					}
				}
			})
		</script>	
	</body>

三.watch 侦听器需要分别侦听所依赖的多个变量页面渲染时侦听到变化执行否则加载之前缓存的值

<body>
		<div id='app'>
			{{fullName}} &nbsp; {{age}}
		</div>

		<script>
			var app = new Vue({
				el:"#app" ,
				data:{
					firstName:'Robert',
					lastName: 'Downey' ,
					age: 18 ,
					fullName : "hello Vue"
				},
				watch:{
					firstName:function() {
						console.log('计算了一次') ;
						this.fullName = this.firstName + ' ' + this.lastName ;
					},
					lastName:function() {
						console.log('计算了一次') ;
						this.fullName = this.firstName + ' ' + this.lastName ;
					}
				}
				
			})
		</script>	
	</body>

四.computed 计算属性有缓存机制性能高推荐

<body>
		<div id='app'>
			{{fullName}} &nbsp; {{age}}
		</div>

		<script>
			var app = new Vue({
				el:"#app" ,
				data:{
					firstName:'Robert',
					lastName: 'Downey' ,
					age: 18 
				},
				
				computed:{
					fullName:function() {
						console.log('计算了一次') ;
						return this.firstName + ' ' + this.lastName ;
					}
				}
				
			})
		</script>	
	</body>

东陵十三

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.6-方法侦听器计算属性

很多时候需要在视图中渲染的数据是通过已经定义的多个变量通过逻辑计算返回的结果如已经定义 firstName lastName 现在需要渲染 fullName = firstName + lastName 的结果实现方法有多种：watch(侦听器)和computed(计算属性)都具备缓存机制但是相比较 watch需要侦听大量依赖 computed相比简洁所以如果...
复制链接

扫一扫