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 = 1public 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 = 1private 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)?.namecontext.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!:stringasync created () {// 获取state的usernameconsole.log(this.username);// 调用mutation的方法this.setUserName('abcd')// 调用actions的方法this.requestUserName(2)// 获取getterconsole.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)?.namecontext.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.Stateprivate username!: number;@user.Mutationprivate SET_USERNAME!: (name:string) => void;@user.Actionprivate requestUserName!: (id:number) => void;@user.Getterprivate getUserName!: number;async beforeMount () {// stateconsole.log('state:', this.username);// getterconsole.log('getter:', this.getUserName);// mutationthis.SET_USERNAME('helloworld')// actionawait 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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

西南科技大学C++程序设计实验一(C++基础知识)

目录 一、实验目的 二、实验任务 三、预习内容(复习书中前3章内容,说明C++相对于C的扩展有哪些?) 四、问题思考与讨论 一、实验目的 1.熟悉编程环境 2.掌握程序调试方法。 3.熟悉枚举类型、结构体类型等自定义数据类型的使用 4.熟悉函数的定义、说明与使用 5.熟悉引用…

在vue项目中使用vue-video-player播放m3u8视频文件

1.简介 Vue Video Player 是一个基于Vue.js 的视频播放器库&#xff0c;官方API Video.js API docs m3u8是UTF-8编码格式。M3U8是指UTF-8编码的M3U文件&#xff0c;而M3U文件是记录了一个索引纯文本文件&#xff0c;打开它时播放软件并不是播放它&#xff0c;而是根据它的索引…

计算机网络:快速了解网络框架

文章目录 前言一、什么是Internet&#xff1f;1.从具体构成角度什么是协议&#xff1f; 2.从服务角度3小结 二、网络边缘1.采用网络设施面向连接服务&#xff08;TCP&#xff09;2.采用基础设施的无连接服务&#xff08;UDP&#xff09; 三、网络的核心1.电路交换2.分组交换3.分…

时间数据与字符串间相互转换

1. 字符串转成时间 使用datetime.strptime from datetime import datetime start_date "2023-11-28" start_datetime datetime.strptime(start_date, "%Y-%m-%d") print(start_date,start_date) print(start_datetime,start_datetime) print(type(star…

Android : 获取、添加、手机联系人-ContentResolver简单应用

示例图&#xff1a; MainActivity.java package com.example.mygetdata;import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.core.app.ActivityCompat; import androidx.core.content.ContextCompat;import android.Mani…

什么是关系型数据库?

什么是关系型数据库&#xff1f; 关系型数据库&#xff08;RDBMS&#xff09;是建立在关系模型基础上的数据库系统。关系模型是一种数据模型&#xff0c;它表示数据之间的联系&#xff0c;包括一对一、一对多和多对多的关系。在关系型数据库中&#xff0c;数据以表格的形式存储…

Vue项目上线后关闭chroma的vue-devtools调试工具

在项目的main文件中添加如下代码&#xff1a; // 通过设置环境变量 注释生产环境的debug devtools 生产提示 const isDebugMode process.env.NODE_ENV ! production; Vue.config.debug isDebugMode; Vue.config.devtools isDebugMode; Vue.config.productionTip isDebugM…

2024 年应该使用 Bun、Node.js 还是 Deno

2024 年应该使用 Bun、Node.js 还是 Deno 到 2024 年&#xff0c;构建基于 JavaScript 的现代 API 相对简单。我们可以使用Express.js等库并在几分钟内启动可用的 API。但是&#xff0c;现在最具挑战性的部分是选择正确的 JavaScript 引擎。 目前主流的三个运行时是&#xff…

Logstash 部署

目录 1.安装配置Logstash &#xff08;1&#xff09;安装 &#xff08;2&#xff09;测试文件 &#xff08;3&#xff09;配置 服务器 安装软件主机名IP地址系统版本配置LogstashElk10.3.145.14centos7.5.18042核4G 软件版本&#xff1a;logstash-7.13.2.tar.gz 1.安装配…

Android 单元测试初体验(二)-断言

[TOC](Android 单元测试初体验(二)-断言) 前言 当初在学校学安卓的时候&#xff0c;老师敢教学进度&#xff0c;翻到单元测试这一章节的时候提了两句&#xff0c;没有把单元测试当重点讲&#xff0c;只是说我们工作中几乎不会用到&#xff0c;果真在之前的几年工作当中我真的没…

95.STL-遍历算法 for_each

算法概述: 算法主要是由头文件 <algorithm> <functional> <numeric> 组成。 <algorithm> 是所有STL头文件中最大的一个&#xff0c;范围涉及到比较、 交换、查找、遍历操作、复制、修改等等 <numeric> 体积很小&#xff0c;只包括几个在序列上面…

第1章 爬虫基础

目录 1. HTTP 基本原理1.1 URI 和 URL1.2 HTTP 和 HTTPS1.3 请求1.3.1 请求方法1.3.2 请求的网址1.3.3 请求头1.3.4 请求体 1.4 响应1.4.1 响应状态码1.4.2 响应头1.4.3 响应体 2. Web 网页基础2.1 网页的组成2.1.1 HTML2.1.2 CSS2.1.3 JavaScript 2.2 网页的结构2.3 节点树及节…

kubenates的傻瓜式部署教程(K8S部署教程)

推荐配置 主节点2C4G&#xff0c;两个从节点2C2G即可 操作系统我用的centos 一、Dokcer环境安装&#xff08;阿里云环境&#xff09; 1.1 下载docker实例 sudo wget -O /etc/yum.repos.d/docker-ce.repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo…

【LeetCode】69. x的平方根

69. x的平方根 难度&#xff1a;简单 题目 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 **注意&#xff1a;**不允许使用任何内置指数函数和算符&#xff0c;例如…

人工智能 -- 技术概览

1、我们身处人工智能的时代 人们从早期做web开发&#xff0c;到移动端的开发&#xff1b;之后随着数据量的增大&#xff0c;人们开始研究高并发的问题&#xff1b;当数据量不断的增大&#xff0c;而人们希望数据不被浪费时&#xff0c;产生了大数据的技术&#xff0c;包括&…

正则表达式 通配符 awk文本处理工具

目录 什么是正则表达式 概念 正则表达式的结构 正则表达式的组成 元字符 元字符点&#xff08;.&#xff09; 代表字符. 点值表示点需要转义 \ r..t 代表r到t之间任意两个字符 过滤出小写 过滤出非小写 space空格 [[:space:]] 表示次数 位置锚定 例&#xff1a…

第三节HarmonyOS DevEco Studio了解基本工程目录

一、工程级目录 工程的目录结构如下。 目录详情如下&#xff1a; AppScope&#xff1a;存放应用全局所需要的资源文件。Entry&#xff1a;应用的主模块&#xff0c;存放HarmonyOS应用的代码、资源等。oh_modules&#xff1a;工程的依赖包&#xff0c;存放工程依赖的源文件。b…

Umi-OCR图片批量识别文字工具

OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/粘贴/批量导入图片&#xff0c;段落排版/排除水印&#xff0c;扫描/生成二维码。内置多国语言库。 项目地址&#xff1a;https://github.com/hiroi-sora/Umi-OCR

app分发平台应用费用一般要怎么评估的?

评估app分发平台应用的费用&#xff0c;需要考虑多个因素&#xff0c;包括但不限于以下几点&#xff1a; 项目范围和工作量&#xff1a;全面评估项目的范围和工作量&#xff0c;包括项目目标、技术、设计和开发周期等&#xff0c;有助于确定所需的团队规模、时间和预算。预算制…

深度学习之图像分类(十四)CAT: Cross Attention in Vision Transformer详解

IPSA和CPSA的处理流程、维度变换细节 FLOPs的计算方法、以及flops和划分的patch数目以及patch的维度计算关系 IPSA如何进行local attention、CPSA如何进行globe attention CAT的代码详细注释---需要学习完Transformer TNT、swin transformer、crossViT CAT: Cross Atten…