监听器属性
- 使用watch来响应数据的变化
- 一般用于异步或者开销较大的操作
- watch 中的属性 一定是data 中 已经存在的数据
- 当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听
<div id="app">
<div>
<span>名:</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>姓:</span>
<span>
<input type="text" v-model='lastName'>
</span>
</div>
<div>{{fullName}}</div>
</div>
<script type="text/javascript">
/*
侦听器
*/
var vm = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Green',
// fullName: 'Jim Green'
},
//watch 属性 定义 和 data 已经 methods 平级
watch: {
// 注意: 这里firstName 对应着data 中的 firstName
// 当 firstName 值 改变的时候 会自动触发 watch
// val是新数据
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
// 注意: 这里 lastName 对应着data 中的 lastName
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
}
}
});
</script>
监听data中的对象
第一种解决方案:直接对象
将里面的deep设为了true,这样的话,如果修改了这个queryData中的任何一个属性,都会执行handler这个方法。不这样开销是蛮大的。
现在我需要监听这个queryData,我可以这样做:
watch: {
queryData: {
handler: function() {
//do something
},
deep: true
}
}
第二种解决方案:deep
当对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性,比如name,这个时候可以这样
watch: {
'queryData.name': {
handler: function() {
//do something
},
}
}
第三种解决方案:(computed+watch)
或者还可以这样巧用计算属性
computed: {
getName: function() {
return this.queryData.name
}
}
watch: {
getName: {
handler: function() {
//do something
},
}
}
监听数组
数组的修改要用
vm.$set(数组名, 下标, 要修改的值);