在 Vue 中，哪个 watcher 会先被调用？是对一个对象进行深度观察，还是对该对象的属性进行观察？

Question

如果我有下面这个Vue对象，并且myObj.myProp1被改变了，哪个watcher会先被调用？什么决定了订单，有什么方法可以操纵订单？

new Vue({
    data: {
        myObj: {
            myProp1: "one",
            myProp2: "two"
        }
    },
    computed: {
        myProp1: function () { return this.myObj.myProp1; }
    },
    watch: {
        myProp1: function () { alert("myProp1 Changed") },
        myObj: {
            handler: function () { alert("myObj Changed") },
            deep: true
        }
    }
})

当我测试它时，首先调用指向该属性的观察者，但我想确保它不是侥幸，并且依赖于我可能不知道的代码中的其他内容。

是否只是观察者在Vue对象的观察者段中列出的顺序？

Answer 1

for-in观察者初始化的顺序与该语句的工作顺序相同。

组件的观察者在初始化组件时调用的initState函数中进行初始化。

watch使用以下语句枚举对象的属性，for-in如下所示：

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)
    }
  }

有关 JavaScript 中属性的遍历顺序的更多信息，请查看以下文章：

• ES6中对象属性的遍历顺序