监听器属性

使用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(数组名, 下标, 要修改的值);