在 Vue 中，哪个 watcher 会先被调用？ object 上的深度手表，或 object 的财产上的手表？

Question

如果我有下面的Vue object，并且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 object 的观察者段中列出的顺序吗？

Answer 1

watchers 的初始化顺序与for-in语句的工作顺序相同。

组件的观察者在初始化组件时调用的initState function中初始化。

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

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中object属性的遍历顺序

Answer 2

最先看到的将被首先调用。

编辑：看到我的意思是满足标准。