Vue.js计算属性详解与示例-优快云博客

本文链接：https://blog.youkuaiyun.com/MoshMode/article/details/118738981

Vue基础之计算属性

定义：
原理：
get函数执行时机：
优势：
备注：
Demo:

定义：

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

原理：

底层借助了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
					}
				}
			}