章节文章课程简介:
任何事情都需要时间的沉淀,技术也不例外,今天编写Vue3.0系列的章节文章,只是希望能够比别人更早的去尝鲜一些新的技术,毕竟Vue3.0已经Beta版本了,所以里正式版本也不远了,提前去学习和了解,我们就会比别人有更多的时间去充分理解Vue3.0的特性,只有当你真正理解一门技术的时候,才能够正确的判定它是否合适、是否应该运用到你当前的实际项目当中去。
- 第一天:浅谈vue3.0、初始化项目之:Hello World Vue3.0
- 第二天:Api实战之:vue-composition 我是api调用工程师
- 第三天:vue3如何实现逻辑复用
- 第四天:实战之:高解耦式mock api的设计与订单列表查询
- 第五天:如何实现代码优化
今天是第三天:vue3如何实现逻辑复用
vue3之前的版本,如果要实现无非是以下两种
1:mixin 把公共的逻辑抽取到一个独立的文件中,但是这种方式存在的问题也很明显,如果项目过于复杂的时候,mixin中的代码和外部组件的代码存在命名冲突的时候会被覆盖,而且如果有相同的生命周期函数也会被覆盖,所以会导致代码难以维护,容易出现bug
2:抽取为公共的工具函数,这种方式虽然能够解决部分场景下的代码复用,但是公共函数内没有各自的生命周期,存在一定的局限性
vue3.0中是如何解决这些问题的,请看下面的代码
假如我要实现一个表格分页的公共代码的复用
useUilts/useResizeMin.js
import { ref, onMounted, onUnmounted } from "vue";
export default () => {
const width = ref(window.innerWidth); //默认值
const height = ref(window.innerHeight); //默认值
const onUpdate = () => {
width.value =window.innerWidth;
height.value = window.innerHeight;
};
onMounted(() => {
window.addEventListener("resize", onUpdate);
});
onUnmounted(() => {
window.removeEventListener("resize", onUpdate);
});
return {width,height}
};
App.vue
<template>
<section>
屏幕width:{{width}}
屏幕height:{{height}}
</section>
</template>
import useResizeMin from "./useUilts/useResizeMin";
export default {
setup() {
//这样就很清晰width这些数据是从哪里维护的,且不会冲突其变量
const {width,height}=useResizeMin();
return {
width,
height
}
}
}
第一天:浅谈vue3.0、初始化项目之:Hello World Vue3.0
第二天:Api实战之:vue-composition 我是api调用工程师
下一篇:第四天:实战之:高解耦式mock api的设计与订单列表查询
🎨 原创不易,支持请点赞、转发