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的設計與訂單列表查詢

🎨 原創不易，支持請點贊、轉發