Vue中使用watch监听的handler，immediate，deep属性
new Vue({el: '#app',data: {num: 0,sum:10,},watch: {// 只要num的值发生变化，sum的值就会变化 不用handler的简洁写法num(newValue, oldValue) {this.sum= newValue;}// 也可以使用handler方法写num:{handler(newValue, oldValue) {this.sum = newValue;}}}
})1.1.immediate属性
watch的特点就是，刚挂载的时候是不执行的，只有挂载完成后的变化才会执行。如果我们想要初次挂载的时候就执行，就需要用上immediate属性(immediate：true)
new Vue({el: '#app',data: {num: 0,sum:10,},watch: {// 只要num的值发生变化，sum的值就会变化num：{handler(newName, oldName) {this.sum= newName;},immediate: true,}}
})1.2.handler方法
这里可以看出添加了一个handler方法，其实watch的语法中是一直有这个handler方法的，只是没有添加immediate和deep属性的时候可以省略。
也可以把方法提炼到methods里面去
new Vue({el: '#app',data: {num: 0,sum:10,},watch: {// 只要num的值发生变化，sum的值就会变化num：{handler: function (newName, oldName) {this.sum= newName;},immediate: true,}}
})new Vue({el: '#app',data: {num: 0,sum:10,},methods:{numfun (newName, oldName) {this.sum= newName;}},watch: {// 只要num的值发生变化，sum的值就会变化num：{handler: 'numfun',//这里引用的是methods里面定义的方法名immediate: true,}}
})当watcher监听到变化的时候，可以同时调用多个方法
new Vue({el: '#app',data: {msg: {name: 'aaa',age: 12}, num: 0,sum: 10},methods:{numfun (newName, oldName) {this.sum= newName;},logLine () {console.log('----logLine ---')},logContent () {console.log('----logContent ---')}},watch: {// 只要num的值发生变化，sum的值就会变化msg：{handler: 'numfun',//这里引用的是methods里面定义的方法名immediate: true,},'msg.name': [ 'logLine ' , 'logContent ' ]//数组的方式可以调用多个方法}
})1.3.deep属性
当我们想监听一个对象中的某个属性的时候，比方说上面msg对象中的name属性。由于Vue会在初始化实例时对属性执行getter/setter转化过程，所以属性必须在data对象上存在才能让Vue转换它，这样才能让它是响应的。
默认情况下，handler只会监听对象的引用变化，我们只有给对象重新赋值的时候，它才会监听到。
那如何才能想听到对象的具体的一个属性了？这就是deep的作用。
new Vue({el: '#app',data: {num: 0,sum: 10,msg:{name:'aaa', age: 12 }},watch: {// 只要num的值发生变化，sum的值就会变化num：{handler(newName, oldName) {this.sum= newName;},immediate: true,},msg:{handler(newValue){console.log('msg的name发生了变化')},deep: true, // 默认是false}}
})deep的意思就是深入观察，监听器会一层层的往下遍历，给对象(msg)的所有属性都加上这个监听器，但是这样性能开销会非常大，任何修改对象里面的任何一个属性都会触发这个监听
器里面的handler。
2.字符串形式的监听
如果我们只想监听对象(msg)的某个具体的属性的变化，不监听对象(msg)的其他属性，可以使用字符串形式的监听。
watch: {'msg.name':{handler(newValue){console.log('msg的name发生了变化')},immediate: true // 默认false//deep: true, // 默认是false}
}这样Vue.js才会一层一层解析下去，知道遇到对象(msg)的属性(name)
3.watch监听路由器
watch: {'$route'(to,from){console.log(to); //to表示去往的界面 变化后的路由console.log(from); //from表示来自于哪个界面 变化前的路由}}// 或者直接监听路由的属性path
watch:{'$route.path':function(newVal,oldVal){//console.log(newVal+"---"+oldVal);if(newVal === '/login'){console.log('欢迎进入登录页面');} else if(newVal === '/register'){console.log('欢迎进入注册页面');}}}
