您好,欢迎来到叨叨游戏网。
搜索
您的当前位置:首页Vue基础之计算属性

Vue基础之计算属性

来源:叨叨游戏网

定义:

要用的属性不存在,要通过已有属性计算得来。

原理:

底层借助了Objcet.defineproperty方法提供的getter和setter。

get函数执行时机:

(1)初次读取时会执行一次。
(2)当依赖的数据发生改变时会被再次调用。

优势:

与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。

备注:

(1)计算属性最终会出现在vm上,直接读取使用即可。
(2)如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。

Demo:

	<body>
		<div id="root">
			姓:<input type="text" v-model="firstName"> <br/><br/>
			名:<input type="text" v-model="lastName"> <br/><br/>
			全名:<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			computed:{
				fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>

当计算属性只有getter时,可简写

computed:{
				fullName(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					}
				}
			}

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- gamedaodao.net 版权所有 湘ICP备2024080961号-6

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务