单向绑定状态更新破坏用户输入，如何缩减必要绑定更新？

问题背景 #

使用Vue的单向绑定:value时，只要组件有其他状态更新（比如示例里的每秒刷新时钟），输入框中用户正在输入的内容就会被重置为绑定的text旧值，体验糟糕。

看这个典型场景：

示例代码 #

HTML

<div>{{ time }}</div>
<input ref="text" type="text" :value="text" style="width:95%">
<button type="button" @click="saveOnDiff">Save</button>

JavaScript

createApp({
  data() {
    return {
      time: new Date(),
      text: ''
    }
  },
  methods: {
    saveOnDiff() {
      const current = this.$refs.text.value;
      // 对比新旧值，仅在变化时更新text
      if (current !== this.text) {
        this.text = current;
      }
    }
  },
  mounted() {
    const instance = this;
    setInterval(() => instance.time = new Date(), 1000);
  }
}).mount('#app');

时钟每秒更新time状态，触发组件重新渲染，此时输入框的:value会被重新赋值为text的当前值（即用户输入前的内容），直接冲掉用户正在输入的内容。

核心诉求：如何把绑定更新的范围缩到最小，只在必要时更新输入框？ 要是单向绑定能支持类似:value.lazy的开关就好了。

可行解决方案 #

1. 拆分组件（最彻底的状态隔离） #

把时钟和输入框拆成两个独立组件，时钟的状态更新只会触发自身渲染，完全不影响输入框所在的组件：

时钟组件（Clock.vue）

<template>
  <div>{{ time }}</div>
</template>

<script>
export default {
  data() {
    return {
      time: new Date()
    }
  },
  mounted() {
    setInterval(() => this.time = new Date(), 1000);
  }
}
</script>

主组件

<template>
  <Clock />
  <input ref="text" type="text" :value="text" style="width:95%">
  <button @click="saveOnDiff">Save</button>
</template>

<script>
import Clock from './Clock.vue'

export default {
  components: { Clock },
  data() {
    return { text: '' }
  },
  methods: {
    saveOnDiff() {
      const current = this.$refs.text.value;
      if (current !== this.text) this.text = current;
    }
  }
}
</script>

2. 使用v-memo精准控制更新（Vue 3.2+） #

给输入框加上v-memo="[text]"，这个指令会让元素仅在依赖数组（此处为text）变化时才重新渲染/更新绑定。时钟更新time时，因为text未变化，输入框不会被重置：

<div>{{ time }}</div>
<input ref="text" type="text" :value="text" v-memo="[text]" style="width:95%">
<button @click="saveOnDiff">Save</button>

这是最简洁的方案，无需修改组件结构，一行代码解决问题。

3. 手动同步输入临时值（兼容旧版本Vue） #

如果使用Vue 3.2之前的版本，无法使用v-memo，可以维护一个临时变量存储用户实时输入，在组件更新后手动恢复输入框的值：

修改后的JavaScript

createApp({
  data() {
    return {
      time: new Date(),
      text: '',
      tempInput: '' // 存储用户实时输入内容
    }
  },
  methods: {
    saveOnDiff() {
      this.text = this.tempInput;
    }
  },
  mounted() {
    setInterval(() => this.time = new Date(), 1000);
  },
  updated() {
    // 组件更新后把输入框值设回临时变量的内容
    this.$refs.text.value = this.tempInput;
  }
}).mount('#app');

修改后的输入框

<input ref="text" type="text" :value="text" @input="tempInput = $event.target.value" style="width:95%">

该方案需要多维护一个变量，但能兼容旧版本Vue。

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