vue计算属性与属性的监视

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			姓：<input type="text" placeholder="xing" v-model="xing" /><br />
			名：<input type="text" placeholder="ming" v-model="ming"/><br />
			姓名1（单向）<input type="text" placeholder="xingming1" v-model="xingming1"/><br />
			姓名2（单向）<input type="text" placeholder="xingming2" v-model="xingming2"/><br />
			姓名3（双向）<input type="text" placeholder="xingming3" v-model="xingming3"/>
			
			
			<h1>计算属性存在缓存</h1>
			{{xingming1}}<br />
			{{xingming1}}
		</div>
		<script>
			var v=new Vue({
				el:'#app',
				data:{
					xing:'1',
					ming:'2',
					xingming2:''
				},
				//计算属性
				//什么时候执行：初始化回执行，当相关属性值发生变化的时候回执行
				computed:{
					xingming1(){
						console.log("xingming1()");
						return this.xing + " " + this.ming
					},
					
					//这是一个属性
					xingming3:{
						//当需要读取当前属性值的时候调用
						get(){
							return this.xing + " " + this.ming
						},
						//当当前属性值发生改变的时候调用
						set(val){
							var xm=val.split(" ");
							this.xing=xm[0];
							this.ming=xm[1];
						}
					}
				},
				
				//监视
				//监视某一个属性的变化
				watch:{
					xing : function(newVal,oldVal){
						this.xingming2=newVal+" "+this.ming
					}
				}
			})
			
			//监视的第二种写法
			v.$watch("ming",function(value){
				this.xingming2=this.xing+" "+value;
			})
		</script>
	</body>
</html>