摘要：
在使用表单元素输入的v-model指令时，我遇到了一个问题：如上图所示，修改输入内容，使其可以随时显示；但显示速度显然很慢{｛obj.x｝exportdefault｛name:‘HelloWorld’，data（）｛return｛obj:｛val:‘‘｝｝｝｝，methods:｛onUpdate（）｛｛this.obj.x＝this.obj.val｝｝}｝j添加属性x，这是无响应的。输出obj还可以观察到val具有getter/setter，这是一个存储属性；新添加的X只是一个简单的数据属性。看一下文档，因为v-model在触发输入事件后基本上会同步输入框的值和数据。尝试更改事件：＜inputv model＞。lazy=“obj.val”@change=“onUpdate”。
在使用表单元素 input 的 v-model 指令时，碰到一个问题：
如上图，修改 input 的内容，以便随时显示；但显示时明显慢一步。
<template>
<div>
<input type="text" v-model="obj.val" @keyup="onUpdate">
<span class="show">{{ obj.x }}</span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
obj: {
val: ''
}
}
},
methods: {
onUpdate () {
this.obj.x = this.obj.val
}
}
}
</script>
稍微熟悉 vue 就明白，这是因为给 obj 新增了属性 x，而 x 并不是响应式的。
输出 obj 也可以观察到：
val 有 getter/setter，是一个 存储器属性；而新增的 x 只是一个单纯的 数据属性。
根据官方文档，用 set 方法即可解决：
this.$set(this.obj, 'x', this.obj.age)
但如果一定要用等号 = 赋值的话，是不是没办法解决视图渲染延迟的问题？
其实可以将监听事件改为 input 就行： @input="onUpdate"
为什么是 input 而不是其它事件？
再看看文档
因为 v-model 本质上就是在 input 事件触发后同步输入框的值与数据。
再试试 change 事件：
<input v-model.lazy="obj.val" @change="onUpdate">
当然这种方式导致 x 不是响应式属性，但能解决问题，只是不知道会不会产生其它问题。