vue2使用ts vue-class-component

目前，对于Vue3来说，TypeScript的支持已经相当成熟，但公司的老项目一直处于迭代和维护无法从v2重构成v3，并且重构的成本也是很大的一个问题，所以记录一下vue2如何去搭配TypeScript。

目录

一、脚手架创建项目

二、vue-property-decorator

（1）变量 

（2）方法

  (3) watch

（4）计算属性

（5）生命周期

   (6) 组件

（1）注册组件

  (2) 父传子

（3）子传父 

 （7）ref引用

三、vuex-class

（1）全局使用 

（2）模块化

四、mixin

一、脚手架创建项目

通过vue-cli进行安装

vue create v2ts

以下是脚手架的配置，仅供参考

二、vue-property-decorator

vue-property-decorator 是一个 Vue.js 的装饰器库，它提供了一些装饰器来让你在 Vue 组件中定义属性、计算属性、方法、事件等。使用这些装饰器可以让 Vue 组件的代码更加清晰简洁，同时也提高了代码的可读性和可维护性。

tip：引入Component是将类组件转换成Vue组件。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HomeView extends Vue {
 
}
</script>

（1）变量 

由于使用的class-component，所以定义变量也是比较简单，只需要把变量写在class里，使用private和public可以更好的区分私有还是共有。

<template>
  <div id="app">
    {{ a }}
    {{ b }}
  </div>
</template>

<script lang="ts">
import { Vue } from 'vue-property-decorator'
export default class HomeView extends Vue {
  private a = 1
  public b = 2
}
</script>

tip：注意 不要初始化不赋值或赋值为undefined，否则会识别不到这个变量，如果你只想定义这个变量也可以采取data函数的形式。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HomeView extends Vue {
  data () {
    return {
      d: undefined
    }
  }
}

（2）方法

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class HomeView extends Vue {
  private a = 1
  private add () {
    console.log(this.a)
    this.a++
  }
}
</script>

(3) watch

语法：

  @Watch('监听属性', { immediate, deep })
  private 方法名 (新值，旧值) {
    console.log(v)
  }

示例： 

<template>
  <div id="app">
    {{ obj.a }}
    <button @click="add">+1</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component
export default class HomeView extends Vue {
  private obj = { a: 1 };
  private add () {
    this.obj.a++
  }

  @Watch('obj', { immediate: true, deep: true })
  private updateA (v: { a: number }) {
    console.log(v)
  }
}
</script>

（4）计算属性

计算属性 在方法名前 加一个get就好了

<template>
  <div id="app">
    {{ obj.a }}
    <button @click="add">+1</button>
    {{ doubleA }}
  </div>
</template>  

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HomeView extends Vue {
  private obj = { a: 1 };

  private add () {
    this.obj.a++
  }

  get doubleA () {
    return this.obj.a * 2
  }
}
</script>

（5）生命周期

和之前区别不大 使用对应的函数名称

<script lang="ts">
@Component
export default class HomeView extends Vue {
 
  created () {
    console.log(123)
  }

  mounted () {
    console.log(456)
  }
}
</script>

(6) 组件

（1）注册组件

<template>
  <div id="app">
    <Son />
  </div>
</template>

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

@Component({
  components: {
    Son
  }
})
</script>

(2) 父传子

父

<Son text="哈哈" />

子 

<template>
    <div>{{ text }}</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class Son extends Vue {
    @Prop({ type: String, default: '' }) text!:string
}

</script>

（3）子传父 

子

<template>
    <div>
        <button @click="emit">子传父</button>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Son extends Vue {
    emit () {
      this.$emit('update', 123)
    }
}

</script>

父

<template>
  <div id="app">
    <Son @update="updateHandler"/>
  </div>
</template>

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

@Component({
  components: {
    Son
  }
})
export default class HomeView extends Vue {
  updateHandler (val:number) {
    console.log(val, '接受了')
  }
}
</script>

也可以通过vue-property-decorator的形式 导出Emit 调用emit的方法即可

<template>
  <div class="hello">
    <button @click="send">传值</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  @Emit()
  send ():number {
    return 20
  }
}
</script>

 （7）ref引用

<template>
  <div id="app">
    {{ a }}
    <Son ref="son" />
  </div>
</template>

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

interface SonComponent extends Vue {
  logHello: ()=>void
}

@Component({
  components: { Son }
})
export default class App extends Vue {
  a = 1;

  mounted () {
    (this.$refs.son as SonComponent).logHello()
  }
}
</script>

三、vuex-class

为了更好的搭配vue-class-component 在使用vuex的时候可以安装 vuex-class 插件 帮助我们更好的使用装饰器开发

npm i vuex-class

（1）全局使用 

store.ts 

import Vue from 'vue'
import Vuex, { Commit } from 'vuex'

Vue.use(Vuex)

interface state {
  username: string
}

export default new Vuex.Store({
  state: {
    username: 'default'
  },
  getters: {
    getUserName (state: state) {
      return '姓名' + state.username
    }
  },
  mutations: {
    SET_USERNAME (state: state, val: string) {
      state.username = val
    }
  },
  actions: {
    async requestUserName (context: { commit: Commit }, id: number) {
      const users = [
        { id: 1, name: 'Ulrtraman' },
        { id: 2, name: 'Monsters' }
      ]
      return new Promise((resolve) => {
        setTimeout(() => {
          const username = users.find(it => it.id === id)?.name
          context.commit('SET_USERNAME', username)
          resolve(username)
        }, 1000);
      })
    }
  },
  modules: {
   
  }
})

组件调用：

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State, Mutation, Action, Getter } from "vuex-class";

@Component
export default class Sister extends Vue {
  @State("username")
  private username!:string;

  @Mutation("SET_USERNAME")
  private setUserName!:(name:string) => void

  @Action("requestUserName")
  private requestUserName!:(id:number) => void

  @Getter("getUserName")
  private getUserName!:string

  async created () {
    // 获取state的username
    console.log(this.username);
    // 调用mutation的方法
    this.setUserName('abcd')
    // 调用actions的方法
    this.requestUserName(2)
    // 获取getter
    console.log(this.getUserName);
  }
}
</script>

四个模块的导入使用大致相同 

@模块("模块的属性命名")
  private 新名字!:类型; 

（2）模块化

在开发中模块vuex的场景还是比较多的 达到 清晰 易维护。

store/user/user.ts

import { Commit } from 'vuex';

interface state {
    username: string
}

const state: state = {
    username: 'default'
}

const mutations = {
    SET_USERNAME (state: state, val: string) {
        state.username = val
    }
}

const getters = {
    getUserName (state: state) {
        return '姓名' + state.username
    }
}

const actions = {
    async requestUserName (context: { commit: Commit }, id: number) {
        const users = [
            { id: 1, name: 'Ulrtraman' },
            { id: 2, name: 'Monsters' }
        ]
        return new Promise((resolve) => {
            setTimeout(() => {
                const username = users.find(it => it.id === id)?.name
                context.commit('SET_USERNAME', username)
                resolve(username)
            }, 1000);
        })
    }
}

export default {
    state, getters, mutations, actions, namespaced: true
}

tip: 要加namespace 命名空间 

store/index.ts

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user/user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  }
})

组件调用：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';

const user = namespace('user');

@Component({
  components: { Son, Sister }
})
export default class App extends Vue {
  @user.State
  private username!: number;

  @user.Mutation
  private SET_USERNAME!: (name:string) => void;

  @user.Action
  private requestUserName!: (id:number) => void;

  @user.Getter
  private getUserName!: number;


  async beforeMount () {
    // state
    console.log('state:', this.username);
    // getter
    console.log('getter:', this.getUserName);
    // mutation
    this.SET_USERNAME('helloworld')
    // action
    await this.requestUserName(1);
  }
}
</script>

 使用方法：

import { namespace } from 'vuex-class';
const 变量 = namespace('文件名');

..

  @变量.模块
  private 新名字!: 类型;

四、mixin

src/mixins/mixin.ts


import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
    created () {
        console.log('mixin的created');
    }
}

使用mixin

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import mixin from '@/mixins/mixin'

@Component
export default class HelloWorld extends Mixins(mixin) {
}
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/194512.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【AUTOSAR-DoIP】通过 DoIP 进行符合 Autosar 的车辆诊断

【AUTOSAR-DoIP】通过 DoIP 进行符合 Autosar 的车辆诊断

前言 通信协议 DoIP（互联网协议诊断）可通过以太网、WLAN 和移动通信对系统进行灵活而强大的诊断：无论是车间外的诊断还是车载诊断，以及驾驶时的远程访问。 DoIP 可以通过多种方式使用：现代车辆中的电子控制系统高度互连并执行各种复杂的功能。 Autosar 支持的通信协议 Do…
阅读更多...
vue3中shallowReactive与shallowRef

vue3中shallowReactive与shallowRef

shallowReactive与shallowRef shallowReactive: 只处理了对象内最外层属性的响应式(也就是浅响应式) shallowRef: 只处理了value的响应式, 不进行对象的reactive处理 总结: reactive与ref实现的是深度响应式, 而shallowReactive与shallowRef是浅响应式。 什么时候用浅响应…
阅读更多...
08 木谷博客系统RBAC权限设计

08 木谷博客系统RBAC权限设计

这节内容说一下木谷博客系统的权限设计，采用现在主流的权限模型RBAC，对应关系如下： 以上5张表都在mugu_auth_server这个库中 该部分的服务单独定义在user-boot这个模块中。 将角色、权限对应关系加载到Redis 木谷博客系统在认证中心颁发令牌的时候是将用户的角色保存到令牌…
阅读更多...
SpringBoot整合Sharding-Jdbc实现分库分表和分布式全局id

SpringBoot整合Sharding-Jdbc实现分库分表和分布式全局id

SpringBoot整合Sharding-Jdbc Sharding-Jdbc sharding-jdbc是客户端代理的数据库中间件&#xff1b;它和MyCat最大的不同是sharding-jdbc支持库内分表。 整合 数据库环境 在两台不同的主机上分别都创建了sharding_order数据库&#xff0c;库中都有t_order_1和t_order_2两张…
阅读更多...
linux查看emmc分区信息（10种方法 ）

linux查看emmc分区信息（10种方法 ）

目录 ## 1 emmc ## 2 uboot查看 ## 3 kernel查看 方法1 方法2 方法3 方法4 方法5 方法6 方法7 方法8 方法9 方法10 ## 1 emmc 我们要说的是&#xff0c;User Data Partition中的再分区 可简化为 ## 2 uboot查看 u-boot> mmc partPartition Map for MMC device…
阅读更多...
windows dockerdesktop 安装sqlserver2022

windows dockerdesktop 安装sqlserver2022

1.下载windows dockertop软件 下载连接 2.安装完成配置&#xff0c;下载源地址 {"builder": {"gc": {"defaultKeepStorage": "20GB","enabled": true}},"experimental": false,"registry-mirrors": …
阅读更多...
深度学习及其基本原理

深度学习及其基本原理

深度学习的 Ups and Downs概念区分神经网络的构成深度学习基本原理深度学习的普遍近似定理扩展&#xff1a;反卷积网络——可视化每一层提取的特征 深度学习的 Ups and Downs 1958&#xff1a;感知机&#xff08;线性模型&#xff09;1969&#xff1a;感知机有局限性1980s&…
阅读更多...
Chrome网页前端组件调试模式，获取核心业务逻辑

Chrome网页前端组件调试模式，获取核心业务逻辑

进入网页&#xff0c;点击F12&#xff0c;弹出开发者工具对话框&#xff0c;如下图 定位目标组件&#xff0c;如按钮&#xff0c;修改html&#xff0c;插入οnclick"debugger"代码 在网页点击该按钮&#xff0c;触发调试模式 不停按F11&#xff0c;逐个检索文件…
阅读更多...
shell编程系列- bash和sh的区别

shell编程系列- bash和sh的区别

文章目录 引言bash和sh的区别CentOS下的区别Ubuntu下的区别 最佳实践 引言 我们在编写shell脚本时&#xff0c;通常第一行都要声明当前脚本的执行程序&#xff0c;也就是常见的 #!/bin/sh 或者是 #!/bin/bash &#xff0c;我们无论用哪一个脚本似乎都可以正常的执行&#xff0…
阅读更多...
★数据库建表优化

★数据库建表优化

1、冷热分离&#xff1a; 一个表里最好不要存在即有常修改的数据又有不常修改的数据&#xff0c;一个好的做法是&#xff0c;把常修改更新的字段当做热表单独建表&#xff0c;同理不经常修改更新的字段当做冷表单独建表。 2、控制B树的高度&#xff1a; 也就是控制一个表存储的…
阅读更多...
每天五分钟计算机视觉：LeNet是最早用于数字识别的卷积神经网络

每天五分钟计算机视觉：LeNet是最早用于数字识别的卷积神经网络

LeNet 假设你有一张 32321 的图片，然后使用 6 个 55的过滤器，步幅为 1，padding 为 0，输出结果为 28286。图像尺寸从 3232 缩小到 2828。 然后进行池化操作，使用平均池化，过滤器的宽度为 2，步幅为 2，图像的尺寸，高度和宽度都缩小了 2 倍，输出结果是一个14146 的图像。…
阅读更多...
P23 C++字符串

P23 C++字符串

目录 前言 01 什么是字符串 02 字符串是怎么工作的呢&#xff1f; 2.1 字符 2.2 字符串 2.3 如何知道指向hello world的这个指针多大 03 使用字符串 04 字符串传参 前言 本期我们将讨论 C 中的字符串。 首先&#xff0c;什么是字符串&#xff1f; 01 什么是字符串 字…
阅读更多...
Batch Norm简明图解【批归一化】

Batch Norm简明图解【批归一化】

Batch Norm&#xff08;批归一化&#xff09; 是现代深度学习实践者工具包的重要组成部分。 在批归一化论文中引入它后不久&#xff0c;它就被认为在创建可以更快训练的更深层次神经网络方面具有变革性。 Batch Norm 是一种神经网络层&#xff0c;现在在许多架构中普遍使用。 …
阅读更多...
Electronica慕尼黑电子展 Samtec团队与21ic分享虎家产品与方案

Electronica慕尼黑电子展 Samtec团队与21ic分享虎家产品与方案

【摘要/前言】 “希望但凡是能够使用到连接器的场合都有Samtec的身影” 在慕尼黑上海电子展现场&#xff0c;Samtec华东区销售经理章桢彦先生在与21ic副主编刘岩轩老师的采访中&#xff0c;如是说道。这是一种愿景&#xff0c;更是Samtec的努力方向。短短一句话&#xff0c;…
阅读更多...
WebSocket协议在java中的使用

WebSocket协议在java中的使用

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…
阅读更多...
aspera传输方案怎么样，需要选择aspera替代方案吗

aspera传输方案怎么样，需要选择aspera替代方案吗

Aspera传输方案是一种高速、可靠的文件传输解决方案&#xff0c;适用于需要大规模传输大文件或数据集的企业和组织。Aspera采用UDP协议及自己开发的FASP协议进行加速传输&#xff0c;能够在高延迟、高丢包网络环境下实现稳定快速的传输。 Aspera传输方案具有以下优点&#xff1…
阅读更多...
ArcGIS10.x系列 Python工具箱教程

ArcGIS10.x系列 Python工具箱教程

ArcGIS10.x系列 Python工具箱教程 目录 1.前提 2.需要了解的资料 3.Python工具箱制作教程 4. Python工具箱具体样例代码&#xff08;DEM流域分析-河网等级矢量化&#xff09; 1.前提 如果你想自己写Python工具箱&#xff0c;那么假定你已经会ArcPy&#xff0c;如果只是自己…
阅读更多...
ESP32-Web-Server编程- JS 基础5

ESP32-Web-Server编程- JS 基础5

ESP32-Web-Server编程- JS 基础5 概述 JS 编程内容颇多&#xff0c;我们提供一些简单的示例&#xff0c;先玩再学&#xff0c;边玩边学。 示例1-演示通过 JS 进行温度转换 资源链接 对应示例的 code 链接 &#xff08;点击直达代码仓库&#xff09; 示例2-增加网页弹窗 演…
阅读更多...
Maven回顾

Maven回顾

Maven 下载&#xff08;前提要有jdk&#xff09; Maven 下载地址&#xff1a;Maven – Download Apache Maven 设置 Maven 环境变量 添加环境变量 MAVEN_HOME&#xff1a; 右键 "计算机"&#xff0c;选择 "属性"&#xff0c;之后点击 "高级系统设置…
阅读更多...
【libGDX】加载G3DJ模型

【libGDX】加载G3DJ模型

1 前言 libGDX 提供了自己的 3D 格式模型文件&#xff0c;称为 G3D&#xff0c;包含 g3dj&#xff08;Json 格式&#xff09;和 g3db&#xff08;Binary 格式&#xff09;文件&#xff0c;官方介绍见 → importing-blender-models-in-libgdx。 对于 fbx 文件&#xff0c;libGDX…
阅读更多...
最新文章

Copyright @ 2022~2023