TS -- vue和以前代码对比 · Vue&&TypeSprict--基础总结

>[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  <template></template> <script> export default { name: "basic", data(){}, // 参数 props:{}, // 父传子接受 methods:{}, // 方法 computed:{}, // 计算属性 components:{}, // 组件引入 mounted() {}, // 生命周期 watch:{} // 监听 } </script>  <style scoped> </style> ~~~ >[danger] ##### TS 的 VUE 文件（写法一官方文档） ~~~ 1.在'vue' 文件引入： import Vue from 'vue'; 2.'export' 导出Vue.extend({}),里面剩下写法和'js 写法vue 一致' 3.要让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用 Vue.component 或 Vue.extend 定义组件 ~~~ ~~~ <template> <div class="about"> <h1>{{name}}</h1> </div> </template> <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ // 类型推断已启用 data() { return{ name: '王', }; }, }); </script> ~~~ >[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  <template> <div class="home"> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ name:'Home' }) export default class Home extends Vue {} </script>  <style scoped> </style> ~~~ >[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  <template> <div class="home"> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ name:'Home' }) export default class Home extends Vue {} </script>  <style scoped> </style> ~~~ >[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) ~~~