不受欢迎的观察程序执行顺序

Question

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

父级需要能够在任何时间以任何顺序提供"options"数组和/或"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;

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

此处的"val"首先与"locOptions"匹配。它无法匹配，因此为了强制验证，组件将"locVal"one_answers"val"设置为null(如果不匹配，则为唯一可行的值(。之后，当"options"与"locVal"匹配时，由于null对于新集合仍然是一个可行的值，因此不使用"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"one_answers"val"设置为null。然后"val"与"locOptions"匹配。它匹配，因此"locVal"one_answers"val"被设置为3。

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

Answer 1

Vue有一个名为sync的用于观察者的未记录API。

它没有等待下一次打电话给观察者，而是立即打电话给他们。不推荐使用，如果使用不当，可能会导致无限循环。

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