vue对象watch(深度监听)

immediate使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

注意：特别注意，不能用箭头函数，箭头函数，this指向全局

deep属性

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听，比如我们 data 里有一个obj属性：

obj.a: {{obj.a}}

obj.a: 

new Vue({

el: '#root',

data: {

obj: {

a: 123

}

},

watch: {

obj: {

handler(newName, oldName) {

console.log('obj.a changed');

},

immediate: true

}

}

当我们在在输入框中输入数据视图改变obj.a的值时，我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

如果我们需要监听obj里的属性a的值呢？这时候deep属性就派上用场了！

watch: {

obj: {

handler(newName, oldName) {

console.log('obj.a changed');

},

immediate: true,

deep: true

}