computed | 计算属性

1. 在 computed 属性对象中定义计算属性的方法
2. 在页面中使用{{ 方法名 }}来显示计算的结果
3. 定义：要用的属性不存在，要通过已有属性计算得来。
4. 原理：底层借助了 Objcet.defineproperty 方法提供的 getter 和 setter。
5. 计算属性的 get 函数什么时候执行？
   (1). 初次读取时会执行一次。
   (2). 当依赖的数据发生改变时会被再次调用。
6. 优势：与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便。
7. 备注：
   (1). 计算属性最终会出现在vm上，直接读取使用即可。
   (2). 如果计算属性要被修改，那必须写set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变。

<div id="root">
	<h2>计算属性案例</h2>
	<hr>
	<input type="text" v-model="firstname">
	<input type="text" v-model="lastname">
	<h4>{{fullName}}</h4>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false
	const vm = new Vue({
		el: '#root',
		data:{
		firstname:'张',
		lastname:'三'
		},
	computed: {
		fullName: {
		get() {
		return this.firstname + `-`+ this.lastname
		},
		set(value) {
		const arr = value.split('-')
		this.firstname = arr[0]
		this.lastname = arr[1]
		}
		}
		}
	})
</script>

计算属性的简写方式：（前提：此计算属性不需要被修改）

computed: {
	// 可以将计算属性写为一个函数形式，此函数当作计算属性的 getter 使用
	fullName() {
	return this.firstname + `-`+ this.lastname
	}
}