基本使用方式
export default {
watch: {
someObject: {
handler(newValue, oldValue) {
// 注意：在嵌套的变更中，
// 只要没有替换对象本身，
// 那么这里的 `newValue` 和 `oldValue` 相同
},
deep: true, //watch 默认是浅层的,加上deep后，开启深度监听模式，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。
immediate: true， // 强制立即执行回调。watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。
flush: 'post', // 默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项
}
}
}
另外可设置监听路径
watch 选项也支持把键设置成用 . 分隔的路径：
export default {
watch: {
// 注意：只能是简单的路径，不支持表达式。
'some.nested.key'(newValue) {
// ...
}
}
}
一般情况：监听对象内部数据可使用deep:true进行深度监听，对对象某个字段进行监听还可以使用路径定位到具体值，这样就可以不使用deep:true进行深度监听
this.$watch()的使用
我们也可以使用组件实例的 $watch() 方法来命令式地创建一个侦听器：
export default {
created() {
this.$watch('question', (newQuestion) => {
// ...
})
}
}
如果要在特定条件下设置一个侦听器，或者只侦听响应用户交互的内容，这方法很有用。它还允许你提前停止该侦听器。
停止侦听器
用 watch 选项或者 $watch() 实例方法声明的侦听器，会在宿主组件卸载时自动停止。因此，在大多数场景下，你无需关心怎么停止它。
在少数情况下，你的确需要在组件卸载之前就停止一个侦听器，这时可以调用 $watch() API 返回的函数：
const unwatch = this.$watch('foo', callback)
// ...当该侦听器不再需要时
unwatch()