1,通过 watch 监听 data 数据的变化，数据发生变化时，就会打印当前的值
watch: { data(val, value) { console.log(val) console.log(value) } }
2, 通过 watch 监听 list 数据的变化，数据发生变化时，this.number++（使用深度监听）
data（） { return { list: { 'id': 1, 'type': 0 }, number: 0 } }, watch: { list: { handler(newVal) { this.number++ }, deep: true } }
3,通过 watch 监听 data 数据的变化，数据发生变化时,执行 change 方法
watch: { data： 'change' // 值可以为methods的方法名 }， methods: { change(curVal,oldVal){ console.log(curVal,oldVal) } }
4,watch中的immediate、handler和deep属性
immediate 和 handler
这样使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
data（） { return { list: { 'id': 1, 'type': 0 }, number: 0 } }， watch: { list: { handler(newVal) { this.number++ }, immediate: true } }
5,deep
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。
data（） { return { list: { 'id': 1, 'type': 0 }, number: 0 } }， watch: { list: { handler(newVal) { this.number++ }, deep: true } }
6,设置deep:true则可以监听到 list.id 的变化，此时会给 list 的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行 handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：
data（） { return { list: { 'id': 1, 'type': 0 } } }， watch: { 'list.id': { handler(newVal, oldVal) { ...... }, deep: true } }
