Vue中v-model绑定数据变更触发函数，如何避免无限更新循环警告

• 代码基础错误：你现有代码中recallMeetingDetails方法里打印的是不存在的this.inputData，和data中定义的inputDate变量名不一致；同时data返回的对象多写了括号，语法不规范。这类对未定义响应式属性的访问，很容易触发Vue的意外重渲染，进而导致循环更新警告。
• 事件触发时机冲突：date类型的原生input的change事件触发时机，和v-model的双向绑定同步时机在部分浏览器上存在错位，绑定的事件回调如果触发了响应式更新，很容易进入渲染循环。

方案1：用watch监听变量变化（最稳妥） #

完全和视图事件解耦，只要inputDate的值发生变更就自动触发对应逻辑，不会出现事件冲突问题。
HTML代码（删除@change绑定）：

<input
  type="date"
  name="date"
  id="date"
  v-model="inputDate"
/>

Vue代码：

data(){
  return {
    inputDate: new Date().toISOString().slice(0, 10),
  }
},
watch: {
  inputDate(newVal) {
    // 原recallMeetingDetails的业务逻辑直接写在这里即可
    console.log(newVal)
  }
}

方案2：替换事件类型加$nextTick保证同步时序 #

如果一定要用事件触发的方式实现，将@change替换为触发时机更早的@input，同时用$nextTick保证回调执行时v-model已经完成值同步。
HTML代码：

<input
  type="date"
  name="date"
  id="date"
  v-model="inputDate"
  @input="recallMeetingDetails"
/>

Vue代码：

data(){
  return {
    inputDate: new Date().toISOString().slice(0, 10),
  }
},
methods: {
  recallMeetingDetails(){
    this.$nextTick(() => {
      // 修正变量名，和data定义保持一致
      console.log(this.inputDate)
    })
  }
}

方案3：手动实现双向绑定，完全控制更新逻辑 #

不使用v-model的语法糖，手动控制值的赋值和回调触发，从根源避免双向绑定的内置逻辑和自定义事件冲突。
HTML代码：

<input
  type="date"
  name="date"
  id="date"
  :value="inputDate"
  @input="handleDateChange"
/>

Vue代码：

data(){
  return {
    inputDate: new Date().toISOString().slice(0, 10),
  }
},
methods: {
  handleDateChange(e) {
    this.inputDate = e.target.value
    this.recallMeetingDetails()
  },
  recallMeetingDetails(){
    console.log(this.inputDate)
  }
}

内容的提问来源于stack exchange，提问作者Nuruddin