Vuejs2 不良观察者执行命令

我有一个下拉组件，它有两个道具：“val”，“options”（对象数组）。该组件由这些值的本地版本“locVal”和“locOptions”驱动，这些值通过两个公众关注的道具进行更新

父级需要能够随时以任何顺序提供“选项”数组和/或“val”，我的观察者决定如何更新内部值，以便它们始终处于一致状态：

watch: {
  val() {
    // validate 'val' against 'locOptions' and set 'locVal' if match
  },
  options() {
    // validate 'locVal' against 'options' and leave 'locVal' alone
    // if still match otherwise set to null
    // also set 'locOptions' to 'options'           
  }
},

但是，Vue调用被监视函数的顺序有问题。它们不是按照更改的值的顺序调用的，而是按照声明的顺序调用的

假设初始内部值：

locOptions = [
   { val: 1, text: 'one' },
   { val: 2, text: 'two' )
];
locVal = 1;

此处“val”首先与“locOptions”匹配。它无法匹配，因此为了强制验证，组件将“locVal”和“val”设置为null（如果不匹配，则为唯一可行的值）。之后，当“选项”与“locVal”匹配时，它将单独保留“locVal”，因为空值对于新集合仍然是可行的值

// setting the props in opposite order
options = [
   { val: 3, text: 'three' },
   { val: 4, text: 'four' )
];
val = 3;
// desired outcome
'locVal' should be 3
'val' is set to mirror 'locVal' with two way binding

在此场景中，“选项”首先与“locVal”匹配。它失败，因为“1”不在新列表中，因此“locVal”和“val”设置为null。然后将“val”与“locOptions”匹配。它与“locVal”匹配，因此“val”设置为3

如何让Vue观察这些道具的变化顺序，以获得所需的行为？

Vue已经（有了？）为观察者提供了一个名为

sync

它不是等待下一个滴答声呼叫观察者，而是立即呼叫他们。不推荐使用，如果使用不当，可能会导致无限循环

watch: {
  val: {
    handler () {
      // validate 'val' against 'locOptions' and set 'locVal' if match
    },
    sync: true
  }, 
  options() {
    handler() {
      // validate 'locVal' against 'options' and leave 'locVal' alone
      // if still match otherwise set to null
      // also set 'locOptions' to 'options'           
    },
    sync: true
  }
},

---

我不明白为什么你的函数不能做同样的事情。它们都应该与

this.val

和

this.options

匹配。事实上，它应该是相同的函数。他们被叫来的顺序应该不重要。我更新了整个问题以便澄清。

watch: {
  val: {
    handler () {
      // validate 'val' against 'locOptions' and set 'locVal' if match
    },
    sync: true
  }, 
  options() {
    handler() {
      // validate 'locVal' against 'options' and leave 'locVal' alone
      // if still match otherwise set to null
      // also set 'locOptions' to 'options'           
    },
    sync: true
  }
},