TS — vue和以前代码对比
最后更新于：2022-04-02 08:11:40
>[success] # 参考资料
[vue官方文档 -- TypeScript 支持](https://cn.vuejs.org/v2/guide/typescript.html)
[vue-class-component](https://github.com/vuejs/vue-class-component)
[vue-property-decorator](https://github.com/kaorun343/vue-property-decorator)
>[success] # TS的VUE 和 JS的VUE 大对比
~~~
1.根据下面的三个案例，可以看出整体'TS'配合'VUE'的写法有两种(也许方式更多)，
这两种官方也给出了解答如果你喜欢'声明组件时更喜欢基于类的 API'推荐第二种。
~~~
>[danger] ##### JS 的 VUE 文件
~~~ html
~~~
>[danger] ##### TS 的 VUE 文件（写法一官方文档）
~~~
1.在'vue' 文件引入： import Vue from 'vue';
2.'export' 导出Vue.extend({}),里面剩下写法和'js 写法vue 一致'
3.要让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用 Vue.component 或
Vue.extend 定义组件
~~~
~~~
~~~
>[danger] ##### TS 的 VUE 文件（写法二推荐）
~~~
1.需要引入'vue-property-decorator';
2.'export' 导出的时候需要继承'Vue'
3.如果您在声明组件时更喜欢基于类的 API，则可以使用官方维护的
vue-class-component 装饰器
4.但这里使用的是'vue-property-decorator',他是vue社区维护的，是基于官方的
'vue-class-component'的升级版本
5.注意: 在每个组件的类要进行'@Component' 声明告诉'TS'他是一个组件，具体内容
下文会详细说明
~~~
~~~html
~~~
>[info] ## 针对 文档中的第二种做详细理解
[参考'vue class componen'和'vue component'](https://segmentfault.com/q/1010000015951958/a-1020000015954595)
~~~
1.想用第二种写法先搞清，依赖包：
1.1'vue-class-component'：强化 Vue 组件，使用 TypeScript/装饰器 增强 Vue 组件
1.2'vue-property-decorator'：在 vue-class-component 上增强更多的结合 Vue 特性的装饰器
2.'vue class component' 是vue 官方出的,'vue property decorator' 是社区出的
其中'vue class component'提供了 'vue component' 等等
'vue property decorator' 深度依赖了 'vue class component' 拓展出了很多操作符 @Prop @Emit @Inject 等等 可以说是 'vue class component' 的一个超集
正常开发的时候 你只需要使用 'vue property decorator' 中提供的操作符即可 不用再
从'vue class componen' 引入'vue component'
3.通过'vue property decorator'官方文档也可以看出两者的关系:
There are 7 decorators and 1 function (Mixin):
@Emit
@Inject
@Model
@Prop
@Provide
@Watch
@Component (provided by vue-class-component)(这里就可以看出)
Mixins (the helper function named mixins provided by vue-class-component)
~~~
>[danger] ##### 弄清概念 -- 理解文件
~~~html
~~~
>[info] ## vue property decorator -- 文档关键词对照
~~~
@Emit
@Inject
@Model
@Prop
@Provide
@Watch
@Component (provided by vue-class-component)(这里就可以看出)
Mixins (the helper function named mixins provided by vue-class-component)
~~~
';