Vue3 + TypeScript 开发实践总结
前言
迟来的Vue3文章,其实早在今年3月份时就把Vue3过了一遍。
在去年年末又把 TypeScript
重新学了一遍,为了上 Vue3
的车,更好的开车。
在上家公司4月份时,上级领导分配了一个内部的 党务系统开发
,这个系统前端是由我一个人来开发,功能和需求也不怎么复杂的一个B 端
系统,直接上的 Vue3
+ TypeScript
+ Element Plus
开发的,开发两周到最后的上线,期间也遇到很多小坑,很多无处可查,慢慢琢磨最后还是克服了。
Vue3 + TypeScript Study
一, 环境配置
1.1 安装最新 Vue 脚手架
npm install -g @vue/cli
yarn global add @vue/cli
1.2 创建Vue3 项目
vue create projectName
1.3 现有Vue 2 项目 升级到 Vue3
vue add typescript
二, 进击Vue3
2. 1 Vue 2 局限性
随着组件与组件依赖之间不断变大,组件很难读取和维护
没有完美的方法解决跨组件代码重用
2.2 Vue 3 如何解决Vue 2 局限
- 组件难以维护管理
【在Vue3 中 编写组合函数,使用 Compositon Api setUp 来解决】
- 没有完美的方法解决跨组件代码重用
三,Vue3 Composition Ap i
3.1 关于 Composition Api
在Vue3中,也可以不使用 Composition Api
来编写组件,它只是在Vue3 中编写组件中的另一种方法,内部简化了好多操作。
所以你还可以继续使用 Vue2 的方式来 编写 组件。
3.2 什么时候使用Composition Api
TypeScript` 的支持
编写大型组件时,可以使用
Composition Api
组合函数很好的管理状态跨组件重用代码时
四,Composition Api 必备基础
4.1 什么是 setup
setup 是用来配置组件状态的另一种实现。
在setup 中定义的状态,方法要想在模板中使用,必须 return
注意:
setup
方法是在components
,props
data
Methods
Computed
Lifecycle methods
之前执行- 同时在
setup
中是不能访问this
4.2 ref
创建响应式变量
在 Vue2
中,我们定义一个响应式变量可以直接在 data
中 定义并且在模板中使用该变量。 如果 使用的 composition api
的话,我们得在 setup
中 使用 ref
来创建 响应式变量,并且得将它返回,才能在页面中使用。
使用
- 引入
ref
import { ref } from 'vue'
- 引入
- 初始变量
const name = ref('指定默认值')
- 初始变量
- 返回变量
return { name }
在return中还可以返回方法
- 返回变量
- 在
setup
中 访问 定义的变量值,不能直接通过变量名来获取,必须通过 变量名.value 来获取到该对象 、 值
- 在
这样的好处
- 状态好管理,可以划分好几个
setup
状态管理,最后在一个 文件导入所有,并且使用。
<template>
<div>
<h1>{{title}}</h1>
</div>
</template>
<script>
import {ref,defineComponent} from 'vue'
export default defineComponent({
setup () {
// 定义响应式变量
const title = ref('前端自学社区')
// 访问该变量
console.log(title.value)
// 返回变量
return {title}
}
})
</script>
4.3 生命周期
Composition Api 生命周期钩子 和
Vue 2 选项式 生命周期钩子名称一样,只是在使用
组合式API时,前缀为
on,
onMounted`
sd
下面代码中有两个 mounted 生命钩子,你猜哪个会先执行?
setup
会先执行
setup () {
// 定义响应式变量
const title = ref('前端自学社区')
console.log(title)
// 返回变量
function getTitle(){
console.log(title.value)
}
// 页面在加载
onMounted(getTitle)
return {title}
},
mounted() {
console.log('测试 mounted 执行顺序')
},
4.4 watch
在 setup
中使用 watch响应式更改
引入 watch,
import { watch } from 'vue'
直接使用watch,watch 接受 3 个参数
- 要监听更新的 响应式引用或者 getter 函数
- 一个回调用来做更新后的操作
- 可选配置项
import {wathc} from 'vue'
// 定义响应式变量
const num = ref(0)
// 更新响应式变量
function changeNum(){
num.value++
}
// wathc 监听响应式变量
watch(
num,(newValue, oldValue) => {
console.log(`newValue为:${newValue},--------oldValue为:${oldValue}`)
}
)
4.5 computed
它也是 从 vue
导入,computed
函数返回一个作为 computed
的第一个参数传递的 getter 类回调的输出的一个只读的响应式引用。为了访问新创建的计算变量的 value,我们需要像使用 ref
一样使用 .value
property。
**当num值变化时,nums 的值会 *3 **
import {ref,computed} from 'vue';
const num = ref(0)
//更新num
function changeNum(){
num.value++
}
//监听num变化
const nums = computed(() =>{
return num.value * 3
})
五,setup
5.1 接受两个参数
props: 父组件传递过来的属性,
setup` 函数中 props 是响应式的,它会随着数据更新而更新,并且不能使用 ES6 解构,因为它会不能使 props 为响应式。
context
: 它是一个普通的 对象,它暴露3个组件的· property
- Attribute
- 插槽
- 触发事件
context
不是 响应式的,所以可以使用ES6 解构来简便写法。
props:{
obj:{
type:Object
}
},
setup (props,{attrs,slots,emit}) {
console.log(attrs)
console.log(slots)
console.log(emit)
console.log(props.obj)
}
5.2 组件加载 setup
时注意
在组件执行 setup
时, 组件实例没有被创建,因此就无法访问以下属性
data
computed
methods
六,生命周期
在 setup
中使用 生命周期时,前缀必须加 on
.
选项式 API | Hook inside setup |
---|---|
beforeCreate |
|
created |
|
beforeMount |
onBeforeMount |
mounted |
onMounted |
beforeUpdate |
onBeforeUpdate |
updated |
onUpdated |
beforeUnmount |
onBeforeUnmount |
unmounted |
onUnmounted |
errorCaptured |
onErrorCaptured |
renderTracked |
onRenderTracked |
renderTriggered |
onRenderTriggered |
七, 跨组件之间传值
在 Vue 2
中,我们可以使用 Provide/Inject
跨组件传值,在 Vue 3 中也可以。
在 setup
中 使用,必须从 vue
中导入使用。
使用 Provide
时,一般设置为 响应式更新的,这样的话,父组件变更,子组件,子孙组件也跟着更新。
怎么设置为响应式更新呢?
- 使用
ref
/reactive
创建响应式变量- 使用
provide('name', '要传递的响应式变量')
- 最后添加一个更新 响应式变量的事件,这样响应式变量更新,
provide
中的变量也跟着更新。
父组件
父组件
import { provide, defineComponent, ref, reactive } from "vue";
<template>
<Son/>
</template>
<script>
import { provide, defineComponent, ref, reactive } from "vue";
export default defineComponent({
setup() {
const father = ref("我父组件");
const info = reactive({
id: 23,
message: "前端自学社区",
});
function changeProvide(){
info.message = '测试'
}
provide('father',father)
provide('info',info)
return {changeProvide};
}
})
</script>
子组件
<template>
<div>
<h1>{{info.message}}</h1>
<h1>{{fatherData}}</h1>
</div>
</template>
<script>
import {provide, defineComponent,ref,reactive, inject} from 'vue'
export default defineComponent({
setup () {
const fatherData = inject('father')
const info = inject('info')
return {fatherData,info}
}
})
</script>
八, 在Vue 中 使用 TypeScirpt 技巧
8.1 接口约束约束属性
采用
TypeScirpt
的特性, 类型断言 + 接口 完美的对 属性进行了 约束
interface
分页查询 字段属性类型验证
export default interface queryType{
page: Number,
size: Number,
name: String,
age: Number
}
组件中使用
import queryType from '../interface/Home'
data() {
return {
query:{
page:0,
size:10,
name:'测试',
age: 2
} as queryType
}
},
8.2 组件使用 来 defineComponent
定义
这样
TypeScript
正确推断Vue
组件选项中的类型
import { defineComponent } from 'vue'
export default defineComponent({
setup(){
return{ }
}
})
8.3 类型声明 reactive
export default interface Product {
name:String,
price:Number,
address:String
}
import Product from '@/interface/Product'
import {reactive} from 'vue'
const product = reactive({name:'xiaomi 11',price:5999,address:'北京'}) as Product
return {fatherData,info,product}
最后
文中如有错误,欢迎码友在评论区指正,如果对你有所帮助,欢迎点赞和关注~~~
Vue3 + TypeScript 开发实践总结的更多相关文章
- Typescript 开发环境的最佳实践
Typescript 开发环境的最佳实践 0️⃣ git init(略) 1️⃣️️ 初始化:$ yarn add -D ts-node typescript 2️⃣ 生成 tsconfig.json ...
- Angular开发实践(一):环境准备及框架搭建
引言 在工作中引入Angular框架将近一年了,在这一年中不断的踩坑和填坑,当然也学习和积累了很多的知识,包括MVVM框架.前后端分离.前端工程化.SPA优化等等.因此想通过Angular开发实践这系 ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- Vite ❤ Electron——基于Vite搭建Electron+Vue3的开发环境【一】
背景 目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已 ...
- 基于SqlSugar的开发框架循序渐进介绍(14)-- 基于Vue3+TypeScript的全局对象的注入和使用
刚完成一些前端项目的开发,腾出精力来总结一些前端开发的技术点,以及继续完善基于SqlSugar的开发框架循序渐进介绍的系列文章,本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和 ...
- 《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
- Android游戏开发实践(1)之NDK与JNI开发03
Android游戏开发实践(1)之NDK与JNI开发03 前面已经分享了两篇有关Android平台NDK与JNI开发相关的内容.以下列举前面两篇的链接地址,感兴趣的可以再回顾下.那么,这篇继续这个小专 ...
- TFS 2015 敏捷开发实践 – 在Kanban上运行一个Sprint
前言:在 上一篇 TFS2015敏捷开发实践 中,我们给大家介绍了TFS2015中看板的基本使用和功能,这一篇中我们来看一个具体的场景,如何使用看板来运行一个sprint.Sprint是Scrum对迭 ...
- Android游戏开发实践(1)之NDK与JNI开发01
Android游戏开发实践(1)之NDK与JNI开发01 NDK是Native Developement Kit的缩写,顾名思义,NDK是Google提供的一套原生Java代码与本地C/C++代码&q ...
随机推荐
- Docker的镜像理解以及容器的备份、恢复和迁移操作
Docker的镜像理解以及容器的备份.恢复和迁移操作 这篇文章主要介绍了Docker的镜像理解以及容器的备份.恢复和迁移操作,覆盖很多原理知识以及容器的重要操作步骤,极力推荐!需要的朋友可以参考下 D ...
- SystemVerilog 语言部分(二)
接口interface: 既可以设计,也可以用来验证. 验证环境:interface使得连接变得简单不容易出错. interface可以定义端口,单双向信号,内控部使用initial always t ...
- Sparse R-CNN: End-to-End Object Detection with Learnable Proposals 论文解读
前言 事实上,Sparse R-CNN 很多地方是借鉴了去年 Facebook 发布的 DETR,当时应该也算是惊艳众人.其有两点: 无需 nms 进行端到端的目标检测 将 NLP 中的 Transf ...
- Resnet-50网络结构详解
解决的问题: 由于梯度消失,深层网络很难训练.因为梯度反向传播到前面的层,重复相乘可能使梯度无穷小.结果就是,随着网络的层数更深,其性能趋于饱和,甚至迅速下降. 核心思想: 引入一个恒等快捷键(也称之 ...
- 201871030138-杨蕊媛 实验二 个人项目—《D{0-1}背包问题》项目报告
项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/2018CST 这个作业要求链接 https://www.cnblogs.com/nwnu-dai ...
- ResNet-50模型图像分类示例
ResNet-50模型图像分类示例 概述 计算机视觉是当前深度学习研究最广泛.落地最成熟的技术领域,在手机拍照.智能安防.自动驾驶等场景有广泛应用.从2012年AlexNet在ImageNet比赛夺冠 ...
- TensorFlow实现超参数调整
TensorFlow实现超参数调整 正如你目前所看到的,神经网络的性能非常依赖超参数.因此,了解这些参数如何影响网络变得至关重要. 常见的超参数是学习率.正则化器.正则化系数.隐藏层的维数.初始权重值 ...
- YOLOv5目标检测源码重磅发布了!
YOLOv5目标检测源码重磅发布了! https://github.com/ultralytics/yolov5 该存储库代表了对未来对象检测方法的超解析开源研究,并结合了在使用之前的YOLO存储库在 ...
- WebRTC框架中的硬件加速
WebRTC框架中的硬件加速 典型缓冲流量 应用程序和单元测试设置 重要方法调用 WebRTC软件包 局限性 WebRTC是一个免费的开源项目,可为浏览器和移动应用程序提供实时通信功能. WebRTC ...
- Java面试指北!13个认证授权常见面试题/知识点总结!| JavaGuide
大家好,我是 Guide哥!端午已过,又要开始工作学习啦! 我发现有很多小伙伴对认证授权方面的知识不是特别了解,搞不清 Session 认证.JWT 以及 Cookie 这些概念. 所以,根据我根据日 ...