结论
通常是使用了ElementUI的输入框组件。
在原生组件中,几乎不存在无法输入的情况,存在也应该会报错。
在Element的input组件中,如果其绑定了一个未进行过初始化的值,并且在其他的事件方法中,修改了这个值,则会发生响应式丢失的问题。
共性
响应式丢失是由于Vue2实现响应式的原理是利用Object.defineProperty方法,劫持数据对象中的每一个属性。
那么结论也显而易见,由于劫持是定义在初始化阶段的,所以没劫持到我们需要的属性。
beforeCreated -> 劫持数据 -> created
- 倘若用不存在的属性,绑定v-model到输入框上,如果先修改输入框,则相当于正常初始化(就好像数据被预先赋值了一样)。
在这种条件下,我们将无法发现潜在的问题,会显得莫名其妙,一下子有问题,一下子又没问题。
element的问题
前面这个很好解释,但是element具有迷惑性。
element组件的事件函数中(比如选择器的@select),如果为数据添加了没有的属性(也就是我们说的响应式丢失),页面视图依然会刷新,就好像还是响应式的一样。
- input输入框会无法输入,这是最大的问题,接触过Vue的或多或少都知道响应式丢失的问题,然而原生的输入框不存在无法输入的情况,即使是在响应式丢失的情况下,依然是可以输入的。
以上这些结合起来,就会显得莫名其妙,明明看着会跟着变,但是就是无法输入。
解决
初始值
data() {
return {
dataInfo: {
count: 0,
},
};
},
比如说count是要修改的数据,那可以为其设置初始值。
this.$set
this.$set(this.dataInfo,'count', 555);
Vue.set,一样的用法。
更新整体
直接修改dataInfo
this.dataInfo = {
...this.dataInfo,
count: 555
}