In Vue, which watcher will be called first? A deep watch on an object, or a watch on a property of that object?
The order of the initialization of watchers is the same order that the for-in statement works.
The watchers of a component are initialized in the initState function which is invoked when initializing the component.
The properties of the watch object are enumerated using the for-in statement as you can see here:
function initWatch (vm: Component, watch: Object) { for (const key in watch) { // <- watch object properties enumerated here const handler = watch[key] if (Array.isArray(handler)) { for (let i = 0; i < handler.length; i++) { createWatcher(vm, key, handler[i]) } } else { createWatcher(vm, key, handler) } }For more information about the traversal order of properties in JavaScript, check the following article: