计算属性 | Yume Shoka = HaiLan's Blog

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

	<script type="text/javascript">
	const vm = new Vue({
	el: '#app',
	data: {
	firstName: '张',
	lastName: '三'
	},
	computed: {
	fullName: {
	// 当有人读取 fullName 时，get 会被调用，且返回值就作为 fullName 的值
	// 底层代码用的就是 Object.defineProperty
	get() {
	// 此处 this 是 vm
	return this.firstName + this.lastName
	}
	}
	},
	methods: {
	}
	})
	</script>

计算属性中 get 函数和 set 函数

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

	<script type="text/javascript">
	const vm = new Vue({
	el: '#app',
	data: {
	firstName: '张',
	lastName: '三'
	},
	computed: {
	fullName: {
	// 当有人读取 fullName 时，get 会被调用，且返回值就作为 fullName 的值
	// 底层代码用的就是 Object.defineProperty
	//get 什么时候被调用？1. 初次读取 fullName 时 2. 所依赖的数据发生变化时
	get() {
	// 此处 this 是 vm
	return this.firstName + this.lastName
	},
	//set 什么时候被调用？当 fullName 被修改时
	set(value) {
	console.log('接收到的修改的值', value);
	const arr = value.split('-');
	this.firstName = arr[0];
	this.lastName = arr[1];
	}
	}
	},
	methods: {}
	})
	</script>

计算属性的优势，与 methods 实现相比，内部有缓存机制（复用），效率更高

计算属性的简写：

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

	<script type="text/javascript">
	const vm = new Vue({
	el: '#app',
	data: {
	firstName: '张',
	lastName: '三'
	},
	// 简写
	computed: {
	fullName() {
	return this.firstName + this.lastName;
	}
	},
	})
	</script>