vue关于watch和methods值执行顺序问题，以及解决方案

问题

父组件：

<GroupTransform
            :is-show.sync="selectPeopleDialogVisible"
            @callback="getSelectedPeople"
        ></GroupTransform>

watch: {
        selectGroupRight: {
            handler(val) {
            },
            deep: true,

        },
    },
methods:{
getSelectedPeople(){},
}

子组件：

confirm() {
            this.$emit('input', this.rightGroups);
            this.$emit('callback');
        },

目的是当我们触发子组件的confirm时，先更新该组件绑定的v-model的值触发watch，然后再触发callback事件绑定的方法getSelectedPeople。
但是实际执行结果是先执行了getSelectedPeople，然后再进入了watch。

原因：

查询资料后得到以下结论，具体源码和机制暂时不明
（1）页面初始化时： 会执行一次computed，watch初始化时不会执行，methods只有调用的时候才会执行
（2）渲染完成后：
如果不是由点击事件造成的数据变化，执行顺序为：watch——beforeUpdate——computed——updated
如果是由点击事件造成的数据变化，执行顺序为：methods——watch——beforeUpdate——computed——update

继续深究：为什么watcher没有立即执行？

在vue的watcher.js文件源码中，我找到了这么一段

 // options
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.lazy = !!options.lazy
      this.sync = !!options.sync
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }
  ......
 /**
   * Subscriber interface.
   * Will be called when a dependency changes.
   */
  update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

可以看到vue的watcher除了我们常用的deep属性可以配置，其实还有一个属性叫做sync，这个属性影响着我们的watcher什么时候执行watcher的回调。
正常情况下不设置sync，依赖数据变动时会触发warcher将其推送进入队列，等到下一个渲染周期的时候触发。

但是$emit触发父组件的自定义事件不会等到下一个周期执行，而是立即执行。

所以代码的效果就变成了先执行callback绑定的父组件getSelectedPeople，再进入watch。

解决方法

如果要程序按照我们最初的想法，先触发watch，在执行methods中的方法，那么只需要在watch中设置sync属性为true即可。

watch: {
        selectGroupRight: {
            handler(val) {},
            deep: true,
            sync: true,
        },
    },