vue避免双向数据绑定方法

Vue双向绑定的特性虽然带来了许多便利之处，但有时却不希望进行双向绑定，比如遇到需要保留初始值的情况，vue的绑定会对原数据进行修改，进而让恢复初始值变得困难。一般的解决方案是在data()函数中复制一份，需要恢复初始值时直接从备份中取。本文介绍另一种解决方案。

  
    
  
  
    编辑
  

如代码所示，我们需要保留每个input的初始值，方法如下，增加一个data-time属性，和input绑定同一个变量，默认情况下input内容改变后，data-time的值也会发生变化，但在使用v-once之后，data-time属性只会被渲染一次，不会再发生变化，这样就实现了我们的目的。然后介绍如何恢复，在edit方法中，将input的ref名称作为参数传入，然后通过this.$refs[refName]获取到input的引用，值得注意的是，这时获取的ref是一个数组，因为在vue2中，如果ref是在v-for中定义的，通过ref名称获取到的都是一个数组。

jtZqat.png

对于普通文本类型的输入框，直接使用item.time = this.$refs[inputRef][0].dataset.time就可以恢复初始值，但对于特殊类型，如type="datetime-local"，除了上面的步骤以外，还必须对input的value属性进行赋值才会在页面中显示，即

item.time = this.$refs[inputRef][0].dataset.time
this.$refs[inputRef][0].value = this.$refs[inputRef][0].dataset.time