1.vue提供了一种更通用的方式来观察和响应vue实例上的数据变动:监听属性。当你有一些数据需要随着其他数据变化而变化时,就可以使用监听器。(它主要用于监测Vue实例的数据变动,并依据该数据变动做出响应,如更新另一数据,或者发起异步请求从服务端请求数据,和计算属性的区别就是,监听器不需要返回新的数据,不能被当做数据属性使用,当需要在数据变化时执行异步或者开销较大的操作时,使用监听器时最合适的)
2.不要使用箭头函数来定义监听器函数,因为箭头函数绑定的是父级作用域的上下文。
3.监听器在定义时,除了直接写一个函数外,还可以接一个方法名。
4.监听器还可以监听一个对象的属性变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../JS/vue.js"></script>
<title>监听器</title>
</head>
<body>
<!--
监听器时在vue实例的选项对象的watch选项中定义的。
-->
<div id="app">
千米:<input type="text" v-model="kilometers">
米:<input type="text" v-model="meters">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
kilometers:0,
meters:0
},
watch:{
kilometers: function(val){
this.meters = val *1000;
},
//监听器函数也可以接受两个参数,val是当前值,oldVal是改变之前的值
meters: function(val,oldVal){
this.kilometers = val/1000;
console.log(oldVal);
}
}
});
</script>
</body>
</html>
监听对象属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../JS/vue.js"></script>
<title>监听器-监听对象属性</title>
</head>
<body>
<!--
在监听对象属性改变时,使用了两个新的选项:handler和deep,前者用于定义当前数据变化时调用的监听器函数,后者
主要在监听对象属性变化时使用,该选项的值为true,表示无论该对象的属性在对象中的层级有多深,只要该属性的值发生变化
-->
<div id="app">
年龄:<input type="text" v-model="person.age">
<p v-if="info">{{info}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
person:{
name:'lisi',
age:0
},
info:''
},
watch:{
person:{
handler:function(val,oldVal){
if (val.age>=18){
this.info = '已成年'
}else{
this.info = '未成年'
}
},
deep: true
},
//监听器函数也可以接受两个参数,val是当前值,oldVal是改变之前的值
meters: function(val,oldVal){
this.kilometers = val/1000;
console.log(oldVal);
}
}
});
</script>
</body>
</html>
监听属性调用方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../JS/vue.js"></script>
<title>监听器-监听属性调用方法</title>
</head>
<body>
<!--
-->
<div id="app">
年龄:<input type="text" v-model="age">
<p v-if="info">{{info}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
age:0,
info:''
},
methods:{
checkAge(){
if (this.age>=18){
this.info = '已成年'
}else{
this.info = '未成年'
}
}
},
watch:{
age: 'checkAge'
}
});
</script>
</body>
</html>