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的设计与订单列表查询

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