面试题：Vue 中如何实现表单数据的双向同步及延迟更新

Question

在 Vue 项目中，有一个文本输入框，要求实现输入内容与数据的双向绑定，并且在输入结束 300 毫秒后更新数据到服务器。请描述实现思路，并给出关键代码示例。

Answer 1

实现思路

1. 使用 Vue 的 v-model 指令实现文本输入框与数据的双向绑定。
2. 利用 watch 监听器监听数据变化。
3. 在监听器中使用 setTimeout 延迟 300 毫秒后将数据发送到服务器。

关键代码示例

<template>
  <div>
    <input v-model="inputValue" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  watch: {
    inputValue: {
      immediate: true,
      handler(newValue) {
        let timer;
        clearTimeout(timer);
        timer = setTimeout(() => {
          // 这里发送数据到服务器
          this.sendDataToServer(newValue);
        }, 300);
      }
    }
  },
  methods: {
    sendDataToServer(data) {
      // 模拟发送数据到服务器的逻辑
      console.log('Sending data to server:', data);
    }
  }
};
</script>