Vue+TypeScript类式组件双向绑定失效问题求助

你遇到的双向绑定失效问题，核心原因是类组件里的test属性没有被正确初始化为响应式数据。Vue的类组件（基于vue-class-component）需要数据属性有明确的初始值，才能被Vue的响应式系统识别并追踪。

修改后的组件代码 #

import { Component } from 'vue-property-decorator'
import Vue from "vue";

@Component({})
export default class TestComponent extends Vue {
  // 给test属性添加初始值，让Vue能将其转化为响应式数据
  test: string = ''; 
}

问题原因解释 #

在TypeScript中，test:string只是类型注解，不会在运行时为组件实例创建这个属性。Vue的响应式系统依赖实例上存在的属性来建立数据追踪关系，所以必须给属性赋予初始值（哪怕是空字符串、null或其他默认值）。这样vue-class-component才能自动把这个类属性映射到Vue实例的data选项中，从而实现双向绑定。

可选：入口文件的最佳写法 #

虽然你当前的组件调用方式可以正常工作，但更符合Vue开发习惯的写法是使用$mount方法：

const test = new TestComponent().$mount('#element');

修改后，你会发现输入框的内容能实时同步到页面的<span>中，Vue Devtools也能正常显示并追踪test属性的变化了。

内容的提问来源于stack exchange，提问作者Yaron