• 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.tsshims-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 的区别

    后续更新。。。

  • 相关阅读:
    3.22-3.29课题(拼团系统)进度汇报
    结对编程二--单元测试
    个人作业2——英语学习APP案例分析
    第三周进度报告(拼团系统项目)
    结对编程1
    启动Tomcat提示:指定的服务未安装
    (C#)DataTable导出Excel
    支持向量机通俗导论(理解SVM的三层境界)
    LIBSVM在Matlab下的使用
    dev中 使用一些控件后,窗体屏蔽右键某些菜单
  • 原文地址:https://www.cnblogs.com/qingheshiguang/p/14693195.html
Copyright © 2020-2023  润新知