vue3 typescript实战,vue+typescript实战教程
本文主要介绍Vue3结合TypeScript项目的开发实践总结，通过示例代码详细介绍，具有一定的参考价值，感兴趣的朋友可以参考一下。
目录
概述1。组合API 1，ref和reactive的区别？2.周期函数3、存储使用4、路由器使用2、关注点分离3、类型脚本支持
概述
Vue3出来有一段时间了，在团队里也进行了很多商业实践和自己的一些思考。
总的来说，Vue3无论是在底层原理上，还是在实际业务发展上，都取得了很大的进步。
用proxy代替之前Object.defineProperty的API，性能更加优秀，也解决了vue之前在处理对象和数组方面的缺陷；diff算法中使用了静态标记，大大提高了Vue的执行效率。
在使用层面，我们从options Api变成了composition Api。慢慢地，在实际业务中，我们放弃了最初孤立地编写数据、方法和计算。更专注的Compositon Api，关注的是相关业务的聚合。同时，在组合Api中，为了防止过于沉重的业务逻辑，提供了分离关注点的方式，大大提高了我们代码的可读性。
全面支持TypeScript，类型验证已经成为Vue3未来大型项目开发的质量保证。同时也是面对趋势——前端的未来是打字稿！
1、compositon Api
compositon Api的精髓体现在代码中，就是一个设置函数。在此设置功能中，返回的数据将用于此组件的模板中。这个返回的对象，一定程度上代表了之前vue2中的数据属性。
从“vue”导入{ defineComponent，ref }；
导出默认定义组件({
名称：礼物，
setup() {
const counter=ref(0)；
返回{
计数器
}
}
})
此时，对于大多数初学者来说，可能的疑惑是，我能定义选项Api的编写吗，比如data、computed、watch、methods等。
这里我需要明确一点，Vue3是这个options Api的编写方法，完全兼容Vue2，但是从概念上来说，更推荐用setup的方式来编写我们的组件。原因如下：Vue3的存在是为了解决Vue2本身的问题，而Vue2的问题是缺乏聚合会导致代码越来越臃肿！设置的方式可以生成数据、方法逻辑、依赖关系等。聚合在一起，更方便维护。
也就是说，在未来，我们应该尽量不要单独编写数据、计算、观察、方法等。不是说Vue3不支持，而是违背了Vue3的理念。
属性，即组件的子组件。这个配置在Vue2和3之间差别不大。Vue2怎么用，Vue3还是那么用。
1、ref 和 reactive的区别？
函数方面，ref和reactive都是响应式数据！
在语法层面，两者是有区别的。ref定义的响应数据需要通过[data]进行更改。价值；由反应需求[数据]定义的数据。[属性]更改数据。
const act title:ref string=ref( activity name )；
const actData=reactive({
列表：[]，
总计：0，
curentPage: 1，
页面大小：10
});
行动；标题；value=“活动名称2”；
actData.total=100
但是在应用层面，还是有区别的。一般来说，我们使用ref来定义单一常见数据类型的响应。在表单的场景中，描述对象的场景如key:value of a form，使用reactive；在某些场景下，某个模块的一组数据通常是以反应式的方式定义的。
那么，一定要用reactive来定义对象吗？其实不是的。没关系。根据自己的业务场景，具体问题具体分析！Ref强调一个数据的值的变化，reactive强调一个定义对象的某个属性的变化。
2、周期函数
周期函数，在Vue3中，单独使用，用法如下：
从“vue”导入{ defineComponent，ref，on mounted }；
导出默认定义组件({
名称：礼物，
setup() {
const counter=ref(0)；
onMounted(()={
//处理业务，一般做数据请求。
})
返回{
计数器
}
}
})
3、store使用
在Vue2中，你其实可以通过这个直接得到。$store，但在Vue3中，没有这个概念。用法如下：
从“vuex”导入{ use store }；
从“vue”导入{ defineComponent，ref，computed }；
导出默认定义组件({
名称：礼物，
setup() {
const counter=ref(0)；
const store=use store()；
const storeData=computed(()=store)；//配合computed获取store的值。
返回{
计数器，
storeData
}
}
})
4、router的使用
在Vue2中，路线由此编程。$router，但在Vue3中，它是这样使用的：
从“vuex”导入{ use store }；
从“vue-router”导入{ user outer }；
从“vue”导入{ defineComponent，ref，computed }；
导出默认定义组件({
名称：礼物，
setup() {
const counter=ref(0)；
const router=user outer()；
const onClick=()={
router . push({ name: add gift })；
}
返回{
计数器，
单击事件
}
}
})
2、关注点分离
关注点分离应该分为两层意思：第一层意思是Vue3本身的设置把相关的数据和处理逻辑放在一起，是一种关注点的聚合，方便我们看业务代码。
第二层意味着当设置变大时，我们可以在设置内提取一个相关的业务，从而分离出第二层的关注点。
从“vuex”导入{ use store }；
从“vue-router”导入{ user outer }；
从“vue”导入{ defineComponent，ref，computed }；
从导入用户商品列表。/merchant . js ；
导出默认定义组件({
名称：礼物，
setup() {
const counter=ref(0)；
const router=user outer()；
const onClick=()={
router . push({ name: add gift })；
}
//在这个例子中，我们将与获取商家列表相关的业务分开。那就是下面的merchant.ts。
const { merchant list }=use merchant list()；
返回{
计数器，
onClick，
商人
}
}
})
merchant.ts
从“@/api/rights/gift”导入{ get merchantlist }；
从“vue”导入{ ref，on mounted }；
导出默认函数useMerchantList(): Recordstring，any {
const merchantList=ref([])；
const fetchMerchantList=async()={
let RES=wait get merchantlist({ })；
merchantList.value=res？数据？孩子；
};
on mounted(fetchMerchantList)；
返回{
商人
};
}
3、TypeScript支持
这部分内容，准确的说是TS的内容，但是和Vue3项目的开发息息相关，所以如果真的要用Vue3，还是要了解TS的用法。
不过这部分我不会介绍TS的基本语法，主要是在业务场景下如何组织TS。
使用TS进行业务开发的一个核心思想就是先关注数据结构，然后根据数据结构开发页面。以前的前端开发模式是先写页面，再关注数据。
例如，要写一个礼物列表页面，我们可能需要定义一些接口。总之，我们需要注意页面数据的接口，接口返回的数据类型，接口的参数类型等等。
//礼物创建、编辑、列表中的每一项都会是这个数据类型。
接口IGiftItem {
id:string number；
名称：字符串；
desc:弦乐；
【key: string】:任意；
}
//全局对应的类型定义
//而且一般来说，我们不知道接口返回的类型是什么(可能是null，可能是对象，也可能是数组)，所以我们用范式来定义接口。
界面IResT {
代码：数字；
msg:字符串；
数据：T
}
//接口返回数据类型定义
界面IGiftInfo {
list:ArrayIGiftItem；
pageNum:数字；
pageSize:数字；
合计：数量；
}
在公共接口请求中，我们通常使用TS来定义数据请求、数据请求的req类型和数据请求的res类型。
导出常量getGiftlist=(
参数：Recordstring，any
):PromiseIResIGiftInfo={
返回Http.get(/apis/gift/list ，params)；
};
关于Vue3结合TypeScript项目开发实践的总结，本文到此为止。更多相关Vue3 TypeScript开发内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。