Chapter and Article Course Introduction:

Everything takes time to settle, and technology is no exception. Today, I am writing the chapter and article of Vue3.0 series, just hoping to try some new technologies earlier than others. After all, Vue3.0 has already been in Beta, so the official version of Vue3.0 is not far away. We will have more time than others to fully understand the features of Vue3.0, and only when you really understand a technology can you correctly determine whether it is appropriate and should be applied to your current actual project.

  • Day 1: Brief introduction to Vue3.0, initialization project: Hello World Vue3.0
  • I’m an Api call engineer
  • Day 3: How does VUE3 implement logic reuse
  • Day 4: Practice: Highly decoupled Mock API design and order list query
  • Day 5: How to optimize code

Today is day 3: How does VUE3 implement logic reuse

Prior to VUe3, if you want to implement the following two

1: Mixins logic extraction of the public in a separate file, but the problems in this way is also very obvious, if the project is too complex, exist in the code and external component mixins naming conflicts will be overwritten, and if you have the same life cycle function will be overwritten, so will cause the code difficult to maintain, Bug prone

2. Extraction into common tool functions. Although this method can solve the code reuse in some scenarios, there are certain limitations in common functions because they do not have their own life cycles

How does vue3.0 address these issues? See the code below

Suppose I wanted to implement a common code reuse for table paging

useUilts/useResizeMin.js


import { ref, onMounted, onUnmounted } from "vue";
export default() = > {const width = ref(window.innerWidth); / / the default value
  const height = ref(window.innerHeight); / / the default value
  const onUpdate = (a)= > {
    width.value =window.innerWidth;
    height.value = window.innerHeight;
  };
  onMounted((a)= > {
    window.addEventListener("resize", onUpdate);
  });
  onUnmounted((a)= > {
    window.removeEventListener("resize", onUpdate);
  });
  return {width,height}
};

Copy the code

App.vue

<template> <section> screen width:{{width}} screen height:{{height}} </section> </template> import useResizeMin from "./useUilts/useResizeMin"; Export default {setup() {const {width,height}=useResizeMin(); return { width, height } } }Copy the code

Day 1: Brief introduction to Vue3.0, initialization project: Hello World Vue3.0

I’m an Api call engineer

Design of a highly decoupled Mock API and order list query

🎨 original is not easy, support please like, forward