4. 计算属性和监视

计算属性

• 在 computed 属性对象中定义计算属性的方法
• 在页面中使用{{方法名}}来显示计算的结果

监视属性

• 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
• 当属性变化时, 回调函数自动调用, 在函数内部进行计算

计算属性高级

• 通过 getter/setter 实现对属性数据的显示和监视
• 计算属性存在缓存, 多次读取只执行一次 getter 计算

编码

<div id="demo">
	姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
	名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
	姓名 1(单向): <input type="text" placeholder="Full Name" v-model="fullName1"><br>
	姓名 2(单向): <input type="text" placeholder="Full Name" v-model="fullName2"><br>
	姓名 3(双向): <input type="text" placeholder="Full Name2" v-model="fullName3"><br>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
	el: '#demo',
	data: {
		firstName: 'Kobe',
		lastName: 'bryant',
		fullName2: 'Kobe bryant'
	},
	computed: {
		fullName: function () {
			return this.firstName + " " + this.lastName
		},
		fullName3: {
			get: function () {
				return this.firstName + " " + this.lastName
			},
			set: function (value) {
				var names = value.split(' ')
				this.firstName = names[0]
				this.lastName = names[1]
			}
		}
		},
		watch: {
			lastName: function (newVal, oldVal) {
				this.fullName2 = this.firstName + ' ' + newVal
			}
		}
})

vm.$watch('firstName', function (val) {
	this.fullName2 = val + ' ' + this.lastName
})