Vue2.x 和Vue3.x ，JS 和TS

一、vue js 與 ts

1、js模板

vue2 和 vue3 都一樣

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

2、ts 又分為 class-style方式生成 和非class-style方式生成

非 class-style方式生成

vue2.x

<script lang="ts">
import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default Vue.extend({
  name: 'App',
  components: {
    HelloWorld
  }
});
</script>

vue3.x

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
});
</script>

class-style方式生成

vue2.x

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

vue3.x

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';

@Options({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

以上三種不同之處：

1、ts的會多出兩個類型定義文件 shims-tsx.d.ts 和 shims-vue.d.ts 以及原來的js文件變成ts文件
① shims-tsx.d.ts，允許你以 .tsx結尾的文件，在 Vue項目中編寫 jsx代碼
② shims-vue.d.ts 主要用於 TypeScript 識別 .vue 文件， Ts默認並不支持導入 vue 文件，這個文件告訴 ts導入 .vue 文件都按 VueConstructor 處理。

2、ts的方式中是script多了lang定義語言 <script lang="ts">
3、ts中class-style和非class-style的區別：
class-style使用的是類來定義組件，而非class-style的方式就僅僅是為了使用ts，剩下的用法與js的方式沒有多少區別。而class-style的方式則完全與其他兩種的方式不同，可以發現除了使用類的方式，還使用了裝飾器， @Component就是使用了裝飾器。

二、Vue2.x 與 Vue3.x 的區別

后續更新。。。