每秒更改time将导致整个模板每隔1秒重新运行一次。这将导致该模板中的所有内容都得到更新。
当用户输入<input>元素时，你并没有把值存储在任何地方。你有一个:value来插入值，但是当值改变时你没有更新它。结果是当Vue重新呈现所有内容时，它会跳回到它的原始值。

**可能的解决方案：**请确保您的数据与用户键入的内容保持同步。这可以通过使用v-model和watcher获取新旧值来实现，并基于此来实现此要求。

您可以尝试类似的方法（这不是一个完美的解决方案，但它会给予您一个想法）：
第一个

据我所知，没有办法欺骗VueJs不重新渲染一个特定的字段。
当时间改变时，您现有的虚拟DOM有一个“text”的值，而新生成的虚拟DOM有一个不同的值，所以... VueJS重新呈现它。

更新：

根据@Tolbxela注解，看起来您可以使用v-once只呈现字段一次，并忽略未来的DOM更新。
https://vuejs.org/api/built-in-directives.html#v-once
备选
如果您想控制旧/新状态，为什么不直接使用双向绑定并保存这两种状态呢？
大概是这样的：
第一个
https://jsfiddle.net/dmxLuf9w/6/

最好的解决方案是根本不使用VueReact性来更新计时器。请参阅下面的UPDATE 2。
最简单的修复方法是将:value替换为v-model

更新1：

我们需要另一个数据字段来存储input值。

<input ref="text" type="text" v-model="input" style="width:95%">

检查以下示例。
但对于复杂的应用程序来说，这并不是一个好的解决方案，因为每一秒你的整个应用程序的HTML都在刷新，这可能会导致渲染和延迟的问题。

更新1：

我忽略了比较值的其他逻辑。

更新2：

这个问题帮助我理解了Vue中模板渲染的整个问题。
TransitionGroup lag when using requestAnimationFrame
这里有一篇关于Improve Vue Performance with v-once + v-memo的好文章

代码：

第一次

最简单的修复方法是使用v-memo="[text]"：

<input ref="text" type="text" :value="text" style="width:95%" v-memo="[text]">

仅当我的text属性更新时，才会更新<input>，而不会更新任何其他属性，例如time属性。

在此处测试：https://jsfiddle.net/dL78tsh9/47/