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

    后续更新。。。

  • 相关阅读:
    Lua Websockts
    计算机软件保护条例软件著作权
    git protocol on port 9418 is no longer supported
    【自动化测试】pycharm中导入selenium
    Android Studio代码自动提示无效的解决办法
    【Java基础】Java分支结构程序设计例题
    EXCEL实现回归分析
    【性能测试】安装LoadRunner12.55版本时出现Critical error的解决方法
    Android Studio如何修改模拟器的路径
    MySQL让人又爱又恨的多表查询
  • 原文地址:https://www.cnblogs.com/qingheshiguang/p/14693195.html
Copyright © 2020-2023  润新知