Vue 计算属性

定义：要用的属性不存在，要通过已有的属性计算得来
原理：底层借助了Object.defineproperty方法提供的getter和setter
内部有缓存机制

<script>
	new Vue({
		el:"#root",
		data:{
			firstName:'张',
			lastName:'三'
		},
		computed:{
			fullName:{
				//get有什么用？
				//当有人读取fullName时，get就会被调用，返回值作为fullName的值
				//get什么时候被调用？
				//1.初次读取fullName时 2.所依赖的数据发生变化时
				get(){
					return this.firstName + '-' + this.lastName
				},
				//set什么时候被调用？
				//当fullName被修改时
				set(value){
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			}
		}
	})
</script>

计算属性简写（只考虑读取数据，不考虑修改数据才可以使用简写）

<script>
	new Vue({
		el:"#root",
		data:{
			firstName:'张',
			lastName:'三'
		},
		computed:{
			fullName(){
				return this.firstName + '-' + this.lastName
			}
		}
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14