This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact

This article for the nuggets technology community first, unauthorized prohibit to reprint!

preface

📚 has recently reconsolidated Vue3 and combed relevant knowledge points and details

🎉 has so far scattered flowers:

  • The first1Parts:basis ✔
  • The first2Parts:Further components ✔
  • The first3Parts:Transitions and animation ✔

This article is about Vue3 composite API and reusability related knowledge, I organized the relevant content into 12 brain maps, on the one hand, can quickly understand the relevant knowledge, on the other hand, convenient to view later!

🎁 By the end of this section you will have a full and clear view of the reusability of Vue

Pain points addressed in this series

  1. Say goodbye to boring documents; Summarize all Vue3. X knowledge points in a brief and comprehensive way in the form of pictures

  2. Original documents will be attached; And the original file will be updated over time with Vue version iteration

Details are as follows: 👇

Mind maps

Introduction to the composite API

We know that Vue3 introduces the Composition API, but what does it do? Many people find it hard to explain! To use a colloquial phrase, the Composition API is actually designed to solve the problem of functional, data, and business logic fragmentation, making the project more modular for development and later maintenance

For details, see part 2 below

The setup function

Setup is an optional configuration item and entry to the Composition API, essentially a function that takes props and context as arguments, where context is an object that exposes three properties of the component:

  • attrs
  • slots
  • emit

Note: When SETUP is executed, the component instance has not yet been created

Lifecycle hook

Vue also registers lifecycle hook functions in setup that have similar names to the option API but are prefixed with ON

Dojo.provide and Inject

Provide /inject can also be used in the composite API, but both can only be called during setup() of the current active instance

The template references template-refs

You can use ref to get a reference to an element or component instance within a template. Note that template references only get assigned after the initial rendering

Mixin

Mixin A technique used to distribute reusable functionality in components. Essentially, a Mixin object can contain any component option

A component can use mixin objects by configuring option mixins, and when mixin objects are used, the options in all mixin objects are blended into the options of the component itself in the appropriate way

Mixins can also be applied globally to a Vue application through the mixin() method on the application instance

Custom instruction

A global custom directive can be registered in the VUE using directive() on the application instance. If local directives are required, configure the caching option in the component. But remember to start with “V -” when using commands

Teleport components

A Teleport, also known as a portal component, is used to provide a concise way to specify the parent element of its contents

Vue plug-in

Plug-ins are an important way to realize extensions. We can write a plug-in according to our own situation, or use plug-ins through the application instance APP. Note: Multiple calls to use() will only install the plug-in once

The attachment

I will upload the above original pictures and source files to github: github.com/jCodeLife/m…

Objective:

  • A convenient batch download
  • Secondly, it can be modified according to its own ideas and habits

END

That’s all about reusability in Vue

If you have any questions, please leave a message. Thank you