Vue 侦听器和计算属性

侦听器 ： 可以监听vue实例中data中的元素 当其发生变化的时候，可以进行一系列的操作

用法 ： 在vue实例中 使用watch属性来定义侦听器， watch属性中的key代表vue实例中的data数据，后面接一个function 函数 在这个数据发生改变的时候 function函数就会执行 function中的参数 val 代表监听的数据改变后的值。

例子： 有一个姓和名 还有一个完整的名字 当姓或者名改变的时候 完整的名字也要改变 因为我们对完整的名字也绑定了一个值 姓和名也都分别绑定了一个值 所以我们改变姓和名都不能使完整的名字中的值改变 为了实现这一要求 我们可以使用侦听器去实现。

<div id ='d1'>
			<label for="f"><span>firstName:</span></label><input type="text" id='f' v-model="firstName"/> <br />
			<label for="l"><span>lastName:</span></label><input type="text" id='l' v-model="lastName"/> <br />
			<span>{{fullName}}</span>
		</div>
		<script>
			var v = new Vue({
				el : '#d1',
				data : {
					firstName : 'Tom',
					lastName : 'Smith',
					fullName : 'Tom Smith'
				},
				//侦听器
				watch : {
					firstName : function(val){
						//val表示改变后的值
						this.fullName = val + ' ' + this.lastName;
					},
					lastName : function(val){
						//val代表改变后的值
						this.fullName = this.firstName + ' ' + val;
					}
				}
			})
		</script>

侦听器的一个应用场景 ： 验证用户名是否合法 当输入框失去焦点之后 会去服务器端验证（一般是异步加载） 然后返回验证结果 显示在前端

<div id ='d1'>
			<label for="userName">请输入用户名:</label>
			<input type="text" id='userName' v-model.lazy="userName"/>
			<span>{{tip}}</span>
		</div>
		<script>
			var v = new Vue({
				el : '#d1',
				data : {
					userName : '',
					//tip代表提示
					tip : ''
				},
				watch : {
					userName : function(val){
						console.log(1111);
						this.check(val);
						this.tip = '正在验证...';
					}
				},
				methods : {
					check : function(val){
						var that = this;
						//使用setTimeout来模拟异步请求
						setTimeout(function(){
							if(val == 'admin'){
								that.tip = '该用户名合法';
							}else{
								that.tip = '该用户名已存在 请重新输入'
							}
						},2000);
					}
				}
			})
		</script>

计算属性 ：
属性是一个静态内容，计算是一个动词 顾名思义 计算属性就是 属性后并不是一个静态的值 而是一个函数 。

计算属性不是在data中定义 而是一个独立的属性：computed

例如 上面的例子实现也可以使用计算属性实现：

<div id ='d1'>
			<label for="f"><span>firstName:</span></label><input type="text" id='f' v-model="firstName"/> <br />
			<label for="l"><span>lastName:</span></label><input type="text" id='l' v-model="lastName"/> <br />
			<span>{{fullName}}</span>
		</div>
		<script>
			var v = new Vue({
				el : '#d1',
				data : {
					firstName : 'Tom',
					lastName : 'Smith',
//					fullName : 'Tom Smith'
				},
//				watch : {
//					firstName : function(val){
//						//val表示改变后的值
//						this.fullName = val + ' ' + this.lastName;
//					},
//					lastName : function(val){
//						//val代表改变后的值
//						this.fullName = this.firstName + ' ' + val;
//					}
//				},
				computed : {
					fullName : function(){
						return this.firstName + ' ' + this.lastName;
					}
				}
			})
		</script>

计算属性也是基于data中的属性来确定的 当data中属性值改变的时候 计算属性也会一起改变 同时 计算属性和普通属性的区别是 计算属性是基于缓存的，如果计算属性的值没有发生改变 那么它就只会加载一次。