javascript - 如何防止下面的vue watch触发死循环？

Question

我有一个看起来像这样的对象:

visitorInfo: {
  name: {
    name: 'Name',
    value: '',
    isInvalid: false,
    errors: []
  },
  email: {
    name: 'Email address',
    value: '',
    validation: {
      isRequired: true
    },
    errors: []
  },
  phone: {
    name: 'Phone number',
    value: '',
    errors: []
  }
},

我正在使用 watch 在 fields 的 value 发生变化时添加错误消息(例如，当用户在表单中输入时):

fields: {
  handler (fields) {
    Object.entries(fields).forEach(([key, value]) => {
      const field = fields[key]
      const isRequired = field.validation.isRequired && field.value
      if (isRequired) {
        field.errors.push({
          errorType: 'isRequired',
          message: 'This field is required.'
        })
      }
    })
  },
  deep: true
}

但是如您所见，存在一个问题。这点

field.errors.push({
  errorType: 'isRequired',
  message: 'This field is required.'
})

将触发无限循环，因为它正在修改字段。

如何解决这个问题？

Answer 1

由于 vue 无法检测您是否直接修改数组元素，这可能会有所帮助:

field.errors[field.errors.length] = {
  errorType: 'isRequired',
  message: 'This field is required.'
};

另一种选择是简单地检查是否已报告错误:

if (isRequired && !field.errors.length) { ... }

这样做的缺点是它仍然会触发观察者不必要的第二次。

告诉我进展如何。