阅读 4514

vue3.0实战从0到1实战电商管理系统(第三天)

章节文章课程简介:

任何事情都需要时间的沉淀,技术也不例外,今天编写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的设计与订单列表查询

🎨 原创不易,支持请点赞、转发