当前位置: 首页 > news >正文

TypeScript深度剖析:Vue项目中应用TypeScript?

一、前言

与link类似

VUE项目中应用typescript,我们需要引入一个库vue-property-decorator

其是基于vue-class-component库而来,这个库vue官方推出的一个支持使用class方式来开发vue单文件组件的库

主要的功能如下:

  • methods 可以直接声明为类的成员方法
  • 计算属性可以被声明为类的属性访问器
  • 初始化的 data 可以被声明为类属性
  • data、render 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法
  • 所有其他属性,需要放在装饰器中

二、使用

vue-property-decorator 主要提供了多个装饰器和一个函数:

  • @Prop
  • @PropSync
  • @Model
  • @Watch
  • @Provide
  • @Inject
  • @ProvideReactive
  • @InjectReactive
  • @Emit
  • @Ref
  • @Component (由 vue-class-component 提供)
  • Mixins (由 vue-class-component 提供)

@Component

Component装饰器它注明了此类为一个Vue组件,因此即使没有设置选项也不能省略

如果需要定义比如 namecomponentsfiltersdirectives以及自定义属性,就可以在Component装饰器中定义,如下:

import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components';@Component({components:{componentA,componentB,},directives: {focus: {// 指令的定义inserted: function (el) {el.focus()}}}
})
export default class YourCompoent extends Vue{}

computed、data、methods

这里取消了组件的data和methods属性,以往data返回对象中的属性、methods中的方法需要直接定义在Class中,当做类的属性和方法

@Component
export default class HelloDecorator extends Vue {count: number = 123 // 类属性相当于以前的 dataadd(): number { // 类方法就是以前的方法this.count + 1}// 获取计算属性get total(): number {return this.count + 1}// 设置计算属性set total(param:number): void {this.count = param}
}

@props

组件接收属性的装饰器,如下使用:

import {Component,Vue,Prop} from vue-property-decorator;@Component
export default class YourComponent extends Vue {@Prop(String)propA:string;@Prop([String,Number])propB:string|number;@Prop({type: String, // type: [String , Number]default: 'default value', // 一般为String或Number//如果是对象或数组的话。默认值从一个工厂函数中返回// defatult: () => {//     return ['a','b']// }required: true,validator: (value) => {return ['InProcess','Settled'].indexOf(value) !== -1}})propC:string;
}

@watch

实际就是Vue中的监听器,如下:

import { Vue, Component, Watch } from 'vue-property-decorator'@Component
export default class YourComponent extends Vue {@Watch('child')onChildChanged(val: string, oldVal: string) {}@Watch('person', { immediate: true, deep: true })onPersonChanged1(val: Person, oldVal: Person) {}@Watch('person')onPersonChanged2(val: Person, oldVal: Person) {}
}

@emit

vue-property-decorator 提供的 @Emit 装饰器就是代替Vue 中的事件的触发$emit,如下:

import {Vue, Component, Emit} from 'vue-property-decorator';@Component({})export default class Some extends Vue{mounted(){this.$on('emit-todo', function(n) {console.log(n)})this.emitTodo('world');}@Emit()emitTodo(n: string){console.log('hello');}}

三 、总结

可以看到上述typescript版本的vue class的语法与平时javascript版本使用起来还是有很大的不同,多处用到class与装饰器,但实际上本质是一致的,只有不断编写才会得心应手

相关文章:

TypeScript深度剖析:Vue项目中应用TypeScript?

一、前言 与link类似 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-component库而来,这个库vue官方推出的一个支持使用class方式来开发vue单文件组件的库 主要的功能如下: metho…...

linux面试高级篇

题目目录1.虚拟机常用有几种网络模式?请简述其工作原理或你个人的理解?2. Dockerfile中最常见的指令是什么?3.docker网络模式有哪些?4.Kubernetes有哪些核心组件这些组件负责什么工作?5. Pod是什么?6.描述一…...

java 4 (面向对象上)

java——面向对象(上) 目录java——面向对象(上)面向对象的思想概述类的成员(1-2):属性和方法对象的内存解析类中属性的使用类中方法的使用1.举例:2.声明方法:3.说明4.re…...

HTTP报头的2个方法

在采集网页信息的时候,经常需要伪造报头来实现采集脚本的有效执行 下面,我们将使用urllib2的header部分伪造报头来实现采集信息 方法1、 #!/usr/bin/python -- coding: utf-8 -- #encodingutf-8 #Filename:urllib2-header.py import urllib2 import…...

yolov5双目检测车辆识别(2023年+单目+双目+python源码+毕业设计)

行人识别yolov5和v7对比yolo车距源码:yolov5双目检测车辆识别(2023年单目双目python源码毕业设计)上盒岛APP,开线上盲盒商店http://www.hedaoapp.com/yunPC/goodsDetails?pid4132 为了提高传统遗传算法(genetic algorithm, GA)IGA优化BP网络迭代时间过长以及精度偏…...

华为OD机试题,用 Java 解【用户调度问题】问题

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南)华为od机试,独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典使用说明 参加华为od机试,一定要注意不…...

根据mybatis plus注解动态创建sqlite表和表字段

根据mybatis plus注解动态创建sqlite表和表字段 启动时动态创建sqlite数据库,根据mybatis plus注解动态创建表。如果有新增字段,动态创建字段。 文章目录根据mybatis plus注解动态创建sqlite表和表字段一、初始化数据库1.系统启动时初始化数据库2.初始化…...

同步、异步ETL架构的比较

背景介绍: 数据的抽取,转换和加载 (ETL, Extract, Transform, Load) 是构建数据仓库过程中最复杂也是至 关重要的一个步骤,我们通常用两种办法来处理 ETL 流程: 一种是异步(Asynchronous) ETL 方式, 也称为文本文件(Flat file)方式。 另外…...

【机会约束、鲁棒优化】具有排放感知型经济调度中机会约束和鲁棒优化研究【IEEE6节点、IEEE118节点算例】(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...

用Python帮老叔选出好基金,大赚一笔,老叔专门提着茅台登门道谢

我有个老叔很喜欢买基金,因为不想被割韭菜,所以啥群都没进,全部自己精挑细选。 看着他的一个本子密密麻麻地写了一大堆东西,全是基金的数据分析,一大把年纪了挺不容易的,于是就决定帮他一把。 在跟他详谈…...

ZeroTier实现内网穿透详细教程,无需公网IP,实现异地组网

ZeroTier实现内网穿透详细教程,无需公网IP,实现异地组网ZeroTier1.官网注册账号,创建自己的局域网段2.点击创建好的网络,进入设置界面进行设置3.下载客户端,安装客户端,然后连接到网络中4.加入网络成功后&a…...

电商 SaaS 全渠道实时数据中台最佳实践

摘要:本文整理自聚水潭数据专家张成玉,聚水潭高级数据工程师应圣楚,在 FFA 2022 行业案例专场的分享。本篇内容主要分为四个部分:实时数仓的建设和发展数据中台的产品体系及架构实时计算的实践和优化对实时计算的未来展望Tips&…...

macos ncnn 安装踩坑记录···

安装真麻烦踩了无数坑,官方给的安装教程:macos安装ncnn, 安装过程老是报错,记录一下卡的比较久的,网上也不好找资料的错. 我的电脑: 1. 使用homebrew 的时候失败fatal: not in a git directory Error: Command failed…...

ESP32设备驱动-AM2301(DHT21)温度湿度传感器驱动

AM2301(DHT21)温度湿度传感器驱动 文章目录 AM2301(DHT21)温度湿度传感器驱动1、AM2301(DHT21)介绍2、硬件准备3、软件准备4、驱动实现1、AM2301(DHT21)介绍 AM2301 湿敏电容数字温湿度模块是一款含有已校准数字信号输出的温湿度复合传感器。它应用专用的数字模块采集技术和温…...

[数据结构]:16-归并排序(顺序表指针实现形式)(C语言实现)

目录 前言 已完成内容 归并排序实现 01-开发环境 02-文件布局 03-代码 01-主函数 02-头文件 03-PSeqListFunction.cpp 04-SortFunction.cpp 结语 前言 此专栏包含408考研数据结构全部内容,除其中使用到C引用外,全为C语言代码。使用C引用主要是…...

React(七):Router基本使用、嵌套路由、编程式导航、路由传参、懒加载

React(七)一、React-Router的基本使用1.安装和介绍2.路由的配置和跳转3.Navigate的使用4.如果找不到对应的路由路径?二、嵌套路由的用法三、编程式路由导航1.类组件中使用useNavigate2.函数式组件中使用useNavigate四、路由跳转传参1.设置好路…...

Java基础面试题(一)

Java基础面试题 一、面向对象和集合专题 1. 面向对象和面向过程的区别 面向过程:是分析解决问题的步骤,然后用函数把这些步骤一步一步地实现,然后在使用的时候一一调用则可。性能较高,所以单片机、嵌入式开发等一般采用面向过程…...

代码命名规范是一种责任也是一种精神(工匠精神)

代码命名规范之美规范概述命名规范管理类命名BootstrapProcessorManagerHolderFactoryProviderRegistrarEngineServiceTask传播类命名ContextPropagator回调类命名Handler ,Callback,Trigger,ListenerAware监控类命名MetricsEstimatorAccumul…...

奇淫技巧:阅读源码时基于一组快捷键,让我们知道身在何方!

一个十分蛋疼的问题 在我们阅读框架底层源码的时候,我们往往会一个方法一个方法的往下翻,翻了很久很快就会有这样的灵魂拷问:我从那个类(方法)来,我要到哪个(类)方法中去。这个时候…...

你真的弄懂this指向了吗

前言 在说 this 指向之前,请观察以下代码,并说出它们的输出结果: 第 1 组:标准函数 window.color "red"; let o {color: "blue", }; function sayColor() {console.log(this.color); }sayColor(); // 输…...

大厂速报:小红书期权涨麻,字节年终暴击,AI赛道卷疯了

互联网圈没有岁月静好,只有暗潮涌动——大厂裁员传闻从未断档,AI内卷卷到凌晨三点,打工人一边焦虑KPI,一边蹲守大厂福利,有人靠期权实现财富跃迁,有人被组织调整撞个正着。一、核心福利|打工人狂…...

通义千问3-Reranker-0.6B效果惊艳:数学证明步骤间逻辑连贯性重排序

通义千问3-Reranker-0.6B效果惊艳:数学证明步骤间逻辑连贯性重排序 1. 模型介绍与核心能力 通义千问3-Reranker-0.6B是Qwen3 Embedding模型系列的最新成员,专门针对文本重排序任务进行了深度优化。这个6亿参数的模型虽然体积小巧,但在数学证…...

如何用3步实现Jable视频高效下载?开源工具jable-download的完整解决方案

如何用3步实现Jable视频高效下载?开源工具jable-download的完整解决方案 【免费下载链接】jable-download 方便下载jable的小工具 项目地址: https://gitcode.com/gh_mirrors/ja/jable-download jable-download是一款专为普通用户设计的Jable视频下载工具&am…...

通用多模态检索——大模型微调

1、7B的模型,参数量就占到了16G,而且你要检索,要把所有的候选项candidate全部变成向量嵌入,然后计算相似度,3090的24G显存很容易爆,而且数据量一旦大了一点,达到几万,基本就很难跑通…...

PTA编程题‘Person抽象类’避坑指南:变量命名冲突、多态指针数组与输出格式化的那些坑

PTA编程题‘Person抽象类’避坑指南:变量命名冲突、多态指针数组与输出格式化的那些坑 在C面向对象编程的实战中,抽象类和派生类的设计看似简单,却暗藏诸多陷阱。许多初学者在完成PTA/LeetCode这类编程题时,往往因为一些看似微不足…...

求一个V站邀请码

有没有大佬可以给个邀请码~~~~~~~~~~~~~~~~~~...

AI结对编程:借助快马平台智能生成qclaw官网的AI功能模块

最近在开发qclaw官网时,尝试用AI辅助完成了一个合同条款分析功能,整个过程比想象中顺畅很多。这个功能的核心是让用户输入合同文本后,自动评估风险等级并给出提示。下面分享下具体实现思路和与AI协作的实践经验。 功能设计要点 首先明确这个…...

OpenClaw+Qwen3.5-4B-Claude:个人知识库自动更新系统

OpenClawQwen3.5-4B-Claude:个人知识库自动更新系统 1. 为什么需要自动化知识管理 作为一个技术从业者,我每天都会接触到大量信息——技术博客、论文摘要、行业动态、代码库更新等等。过去三年里,我尝试过各种笔记工具和知识管理方法&#…...

【悬疑言情小说推荐】《血语玫瑰》

​​​​​​《血语玫瑰》国际标准书号:ISBN:978-986-6364-30-3 作者:追月逐花 本书地址:http://e.dangdang.com/products/1901197341.html 每个女孩都期待男友年轻英俊、家境优渥、学识出众,而 “魔鬼” 恰好符合所有条件&…...

告别C盘爆炸!手把手教你将Dify+Docker数据盘迁移到D盘(附.ENV配置详解)

告别C盘爆炸!手把手教你将DifyDocker数据盘迁移到D盘(附.ENV配置详解) Windows系统盘空间告急是许多开发者的共同烦恼,尤其是当你开始使用Docker部署AI开发环境时。C盘空间像被黑洞吞噬一样迅速消失,系统运行速度也随之…...