Vue计算属性和监视

Vue计算属性

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

Vue监视属性

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

Vue的高级计算属性

• 通过 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 Name1" v-model="fullName1"><br>
			姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"><br> 
			姓名3（双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"><br>
			
			<p>{{fullName1}}</p>
			<p>{{fullName1}}</p>
			<p>{{fullName1}}</p>
</div>

		<script type="text-javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#demo",
				data: {
					firstName: 'A',
					lastName: 'B',
					fullName1:'A B',
					fullName2: 'A B'
				},
				computed: {
					//计算属性方法什么时候执行：1 初始化显示的时候 2相关的data属性数据发生变化的时候执行
					fullName1: function() { //计算属性中的一个方法，方法的返回值作为属性值
						//console.log('fullName1()');
						return this.firstName + ' ' + this.lastName
					},
					fullName3:{
						//回调函数 ，当需要读取当前属性值的时候执行回调函数，计算并返回当前属性的值
						get:function(){
							return this.firstName + ' ' + this.lastName
						},
						//回调函数，当属性值发生改变的时候执行回调,在这里就是更新相关的属性数据的时候执行回调
						//set方法用来监视当前属性值的变化
						set:function(value){//这里的value就是fullName3的最新属性值
							var names=value.split(' ');
							this.firstName=names[0];
							this.lastName=names[1];
						}
					}
				},
				watch: { //配置监视
					firstName: function(value) {
						//该函数说明firstName发生了改变
						console.log(this); //就是vm对象
						this.fullName2 = value + ' ' + this.lastName;
					}
				}
			})
			vm.$watch('lastName',function(value){
				//更新fullName2
				this.fullName2=this.firstName+' '+value;
			})
		</script>