typescript开发VUE中v-model指令不更新问题

typescript开发vue，经常遇到prop不刷新的问题。
这个问题原因是这样的。
在typescript的vue中定义的prop需要用@Prop注释。
用过@Prop定义的那个属性，如果在组件中适用，即便是console.log输出，都会遇到一个警告，说这个变量是从外部设置的，建议不要直接使用。因为他可能随时 改变。
这个警告在console控制台不断的刷，非常烦人。
于是就有了如下写法：

  /**
   * 输入值.
   */
  @Prop({
    required: false,
    default: '',
  })
  protected value!: string;
  protected propValue: string = this.value;

然后在所有的地方用propValue这个属性。

接下来问题来了，在引用组件的父页面中，对象中的属性更新，无法触发这个组件的赋值。比如：

<x v-model="name"/>

这样没有问题，但是

<x v-model="target.name"/>

这样在target中的name属性更新之后，组件是不会发生变化的。

如果用js还好，毕竟用js不会计较太多OO的问题。但是既然用了TypeScript，必然很多数据都封装成了对象，总不能把所有属性copy到组件上吧。

经过各种尝试，$set不好用，$forceupdate时而好用，时而不好用，$nextTick也是看心情。

最后发现，其实是需要@Watch的。

  /**
   * 输入值.
   */
  @Prop({
    required: false,
    default: '',
  })
  protected value!: string;
  protected propValue: string = this.value;
  
  @Watch("value", {immediate: true})
  public watchValue() {
    this.propValue = this.value;
  }

通过监视value的变化，改变引用成员变量的值。

这样就好了。

但总是如鲠在喉。掉了多少头发啊，都提示不推荐用了，就不知道一起说一下推荐用法么！

---

THE END