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 first
1
Parts:basis ✔ - The first
2
Parts:Further components ✔ - The first
3
Parts: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
-
Say goodbye to boring documents; Summarize all Vue3. X knowledge points in a brief and comprehensive way in the form of pictures
-
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