Vue3结合TypeScript项⽬开发实战记录
⽬录
概述
1、compositon Api
1、ref 和 reactive的区别？
2、周期函数
3、store使⽤
4、router的使⽤
2、关注点分离
3、TypeScript⽀持
总结
概述
Vue3出来已经有⼀段时间了，在团队中，也进⾏了⼤量的业务实践，也有了⼀些⾃⼰的思考。
总的来说，Vue3⽆论是在底层的原理上，还是在业务的实际开发中，都有了长⾜的进步。
使⽤ proxy 代替之前的 Object.defineProperty 的API，性能更加优异，也解决了之前vue在处理对象、数组上的缺陷；在diff算法上，使⽤了静态标记的⽅式，⼤⼤提升了Vue的执⾏效率。
在使⽤的层⾯，我们从options Api，变成了composition Api，慢慢的在实际的业务中，我们抛弃了原本的data、methods、computed那种隔离式的写法。compositon Api，它更加聚焦，它讲究的是相关业务的聚合性。同时，在composition Api中，为了防⽌过于重的业务逻辑，它提供了⼀种关注点分离的⽅式，⼤⼤的提升了我们代码的可读性。
完全良好的⽀持了TypeScript，类型校验也成为了以后Vue3进⾏⼤型项⽬开发的质量保障，同时这也是⾯向了趋势 -- 前端的未来就是TypeScript！
1、compositon Api
compositon Api的本质，体现在代码⾥⾯，也就是⼀个setup函数，在这个setup函数中，返回的数据，会⽤到该组件的模板中。return的这个对象，⼀定程度上，代表了之前vue2中的data属性。
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
return {
counter
}
}
})
这时候，对于⼤多数初学者来说，可能存在的疑惑就是，那么我能不能定义options Api的写法，⽐如data、computed、watch、methods等等。
这⾥我需要明确的是，Vue3是完全兼容Vue2的这种options Api的写法，但是从理念上来说，更加推荐setup的⽅式，来写我们的组件。原因如下：Vue3的存在，本⾝是为了解决Vue2的问题的，Vue2的问题就是在于，聚合性不⾜，会导致代码越来越臃肿！setup的⽅式，能够让data、⽅法逻辑、依赖关系等聚合在⼀块，更⽅便维护。
也就是说，以后我们尽量不要写单独的data、computed、watch、methods等等，不是Vue3不⽀持，⽽是和Vue3的理念违背。
components属性，也就是⼀个组件的⼦组件，这个配置在Vue2和3的差异不⼤，Vue2怎么⽤，Vue3依然那么⽤。
1、ref 和 reactive的区别？
在功能⽅⾯，ref 和 reactive，都是可以实现响应式数据！
在语法层⾯，两个有差异。ref定义的响应式数据需要⽤[data].value的⽅式进⾏更改数据；reactive定义的数据需要[data]. [prpoerty]的⽅式更改数据。
const actTitle: Ref<string> = ref('活动名称');
const actData = reactive({
list: [],
total: 0,
curentPage: 1,
pageSize: 10
});
actTitle.value = '活动名称2';
但是在应⽤的层⾯，还是有差异的，通常来说：单个的普通类型的数据，我们使⽤ref来定义响应式。表单场景中，描述⼀个表单的key:value这种对象的场景，使⽤reactive；在⼀些场景下，某⼀个模块的⼀组数据，通常也使⽤reactive的⽅式，定义数据。
那么，对象是不是⾮要使⽤reactive来定义呢？其实不是的，都可以，根据⾃⼰的业务场景，具体问题具体分析！ref他强调的是⼀个数据的value的更改，reactive强调的是定义的对象的某⼀个属性的更改。
2、周期函数
周期函数，在Vue3中，是被单独使⽤的，使⽤⽅式如下：
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
onMounted(() => {
// 处理业务，⼀般进⾏数据请求
})
return {
counter
}
}
})
3、store使⽤
在Vue2中，其实可以直接通过this.$store进⾏获取，但是在Vue3中，其实没有this这个概念，使⽤⽅式如下：
import { useStore } from "vuex";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const store = useStore();
const storeData = computed(() => store); // 配合computed，获取store的值。
return {
counter,
storeData
}
}
})
4、router的使⽤
在Vue2中，是通过this.$router的⽅式，进⾏路由的函数式编程，但是Vue3中，是这么使⽤的：
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const router = useRouter();
const onClick = () => {
router.push({ name: "AddGift" });
}
onClick
}
}
})
2、关注点分离
关注点分离，应该分两层意思：第⼀层意思就是，Vue3的setup，本⾝就把相关的数据，处理逻辑放到⼀起，这就是⼀种关注点的聚合，更⽅便我们看业务代码。
第⼆层意思，就是当setup变的更⼤的时候，我们可以在setup内部，提取相关的⼀块业务，做到第⼆层的关注点分离。
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
import useMerchantList from './merchant.js';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const router = useRouter();
const onClick = () => {
router.push({ name: "AddGift" });
}
// 在该⽰例中，我们把获取商家列表的相关业务分离出去。也就是下⾯的merchant.ts
const {merchantList} = useMerchantList();
return {
counter,
onClick,
merchantList
}
}
})
merchant.ts
import { getMerchantlist } from "@/api/rights/gift";
import { ref, onMounted } from "vue";
export default function useMerchantList(): Record<string, any> {
const merchantList = ref([]);
const fetchMerchantList = async () => {
let res = await getMerchantlist({});
merchantList.value = res?.data?.child;
};
onMounted(fetchMerchantList);
return {
merchantList
};
}
3、TypeScript⽀持
这⼀部分内容，准确的来说，是TS的内容，不过它与Vue3项⽬开发，息息相关，所以真的想⽤Vue3，我们还是得了解TS的使⽤。
不过这⼀部分，我不会介绍TS的基础语法，主要是在业务场景中，如何组织TS。
使⽤TS进⾏业务开发，⼀个核⼼的思维是，先关注数据结构，再根据数据结构进⾏页⾯开发。以前的前端开发模式是，先写页⾯，后关注数据。
⽐如要写⼀个礼品列表的页⾯，我们可能要定义这么⼀些interface。总⽽⾔之，我们需要关注的是：页⾯数据的interface、接⼝返回的数据类型、接⼝的⼊参类型等等。
// 礼品创建、编辑、列表中的每⼀项，都会是这个数据类型。
interface IGiftItem {
id: string | number;
name: string;
}
/
/ 全局相应的类型定义
// ⽽且⼀般来说，我们不确认，接⼝返回的类型到底是什么（可能是null、可能是对象、也可能是数组），所以使⽤范型来定义interface
interface IRes<T> {
code: number;
msg: string;
data: T
}
// 接⼝返回数据类型定义
interface IGiftInfo {
list: Array<IGiftItem>;
pageNum: number;
pageSize: number;
total: number;
}
在⼀个常见的接⼝请求中，我们⼀般使⽤TS这么定义⼀个数据请求，数据请求的req类型，数据请求的res类型。
export const getGiftlist = (
vue中reactiveparams: Record<string, any>
): Promise<IRes<IGiftInfo>> => {
("/apis/gift/list", params);
};
总结
到此这篇关于Vue3结合TypeScript项⽬开发实战的⽂章就介绍到这了，更多相关Vue3结合TS项⽬开发内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论