Vue2+Ts 基于类的组件开发(Vue Class Component)

一、背景

接手一个项目的二开，该项目的架构是Vue2 + Ts，这就很蛋疼。。。
vue2本身是搞不了ts这套的，但是可以安装一些插件来适用，也勉强能用了吧。
至于怎么搭建vue2+ts，本网站直接搜索，很多教程（或者下面官网也有）。

这里主要记录vue2中ts的写法。
也就是基于类的组件开发 —— 官网手册：（Vue Class Component）

直接上代码

<script lang="ts">
import { Component, Prop, Vue, Watch, Provide } from "vue-property-decorator";
import { Breadcrumb } from '@h3/antd-vue'; // 案例组件
// 装饰器：组件
@Component({
	components: {
		ABreadcrumb: Breadcrumb, // 案例组件
	}
})
export default class Demo extends Vue {
	// 参数
	@Prop({ default: '默认值' }) testProp!: any
	// 定义响应式数据
	testData = '测试响应式数据'
	// methods 
	testFn(){
		this.testData = '直接定义方法'
	}
	// 监听
	@Watch('testData')
	onTestDataChange(val: string, oldVal: string){
		...
	}
	@Watch('$route', { immediate: true }) // 监听路由变化
	onRouteChange(){}
	// 跟正常provide, inject意义一样
	@Provide()
	getTestData(){
		return this.testData
	}
	// 生命周期
	created(){}
	...
	// ... 里面其他的写法就跟些class的语法一样constructor，get，set都一样
}
</script>