为什么在watch里面修改data的值，cube的input无法进行同步

Question

template

<cube-input v-model="v" ></cube-input>

data () {
return {
v: ''
}
},
watch: {
v (v) {
this.v = 'zzz'
}
},

包括vux里面也是会出现这种情况

https://github.com/airyland/vux/issues/2622

即。在input中输入内容后并且强行改变内容，父组件中的data会改变，子组件的props中的value会改变，但是子组件input中inputValue不会改变。导致显示内容不改变

Answer 1

ustbhuangyi 2018-08-08 14:53:03

因为父组件的 watcher 是先执行的，并且 user watcher 是高于 render watcher 的，而子组件(cube-input)的 watcher 去监听 value 的变化，而这个 prop 的变化是在父组件 re render 之后。所以当你第一次在 input 输入内容后，v 发生了变化为你输入的内容，然后你又在父组件的 user watcher 中把 v 改成了 zzz，所以传递给 cube-input 的 value 就是 zzz，之后你再去输入 input，还经历上述过程，传递的 prop 还是 zzz，zzz -> zzz 没有变化，所以不会触发子组件的 watcher 回调， inpuntValue 就不会发生变化。

如果想更新，就在 nextTick 后修改 this.z 即可

• 提问者 李行知 #1

  非常感谢！原来如此，就是说其原因是因为props的内容么有改变所以导致未update。感谢老师