vue 使用watch监听注意点

1watch监听不到数据变化

1.1 watch 监听不到 obejct对象的变化
在项目中，当我们需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
解决方法：此时可以设置监听对象的deep:ture。来实现监听到对象属性的变化
例子：

 <input type="text" v-model="student.name"/>
  new Vue({
  el: '#root',
  data: {
     return{
          student: {name:'小明',age:18}
      }
  },
  watch: {
	    student: {
				      handler(newVal, oldVal) {
				      },
				      deep: true,
	           }
         } 
 })

2 watch 监听不到新增和删除对象属性的变化

问题：在上面的例子中，虽然我们可以通过设置deep:true。来监听对象的变化，但如果我们为对象添加或者删除属性，watch是监听不到的

原因： 因为ES5的影响，watch 不能监听到对象属性的添加或删除。
解决方法：
1通过vue的this.$set(object, key, value)方法
2通过Object.assign()重新创建一个对象, 例如this.ob= Object.assign({}, this.ob, { a: 1, b: 2 })
例子：

        <div @click="bySet" style="color: blue">通过$set</div>
        <div @click="byObjectAssign" style="color: blue">通过Object.assign</div>
  data () {
	  return {
			  ob :{a: 1}
	  }	 	  
 }




	  methods: {
	 bySet() {
	  // this.ob.b = 2 // 通过点方法赋值，发现观察不到p的变化
	  this.$set(this.ob, 'b', 2) // 第一种解决方式，可以查看日志看到已经监听到了变化
	 },
	 byObjectAssign() {
	    this.p = Object.assign({}, this.p, {c: 3})
	 }
 },



watch: {
   ob: {
	 handler (newVal, oldVal) {
	},
	  deep: true
	 }
}

3 vue 监听对象中某一个属性的变化

通过设置deep:true，可以监听对象属性的变化，但是如果修改了这个对象中的任何一个属性，都会执行handler这个方法，不过这样加大了页面性能的消耗，那怎样解决呢？
解决方法：1使用watch监听字符串的对象属性
2使用计算属性computed
例子：

    watch: {
				'ob.name': {
					      handler: function() {
					            //do something
					        },
                    }
          }                  
     computed: {
			    getName: function() {
			    	return this.ob.name
			    }
      }
	watch: {
	     getName: {
	         handler: function() {
	            //do something
	         },
	     }
	}

4vue 监听数组对象中某一个属性的变化

我们知道，可以通过设置deep:true来设置对象属性的变化，或者数组对象的变化。但是如果是数组对象呢？还是使用deep:true吗？这样子，watch会监听数组所有属性的变化，这样**无疑加大了页面性能的消耗， *那有什么方法可以监听数组对象某一个属性的变化呢？嘿嘿，答案肯定是有的。
解决方法：
通过vue的computed。watch监听computed的返回值，进行watch监听
例子：

<template>
    <ul>
      <li v-for="(form, i) in forms" :key="i">
        <input type="checkbox" v-model="form.selected"> {{form.colors}}
      </li>
    </ul>
 
</template>
	
	new Vue({
	  el: '#app',
	  data: () => ({
	    forms: [{
	        day: '12',
	        month: '9',
	        year: '2035',
	        colors: 'lightblue',
	        selected: true
	      },
	      {
	        day: '28',
	        month: '01',
	        year: '2017',
	        colors: 'lightgreen',
	        selected: true
	      }
	    ],
	  }),
	  computed: {
	    selected() {
	      return this.forms.map(form => form.selected)
	    }
	  },
	  watch: {
	    selected(newValue) {
	      console.log("change made to selection")
	    }
	  }
	})
	*