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 ✔
  • The first4Parts:Composite API and reuse ✔

This article is a supplement to the content of part 4. About Vue rendering function, I organized the relevant content into the following brain map, on the one hand, it can quickly understand the relevant knowledge, and on the other hand, it is convenient to view later!

🎁 By the end of this section you will have a basic clear idea of Vue’s rendering functions

Problems 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. Attached with original hd drawings and original documents; And the original file will be updated over time with Vue version iteration

Details are as follows: 👇

Mind maps

Render function 1

The render function only returns h, which specifies that the virtual DOM will be created, so we need to first understand what the virtual DOM is

This object is a representation of the real DOM, from which the real DOM will be rendered. The core is the use of the h function, which needs to be aware of the parameters it receives

Render function 2 (native JS instead of template functionality)

Rendering functions do not provide proprietary alternatives to templates as long as they can easily be done with native JS, such as v-if and V-for, which are used in templates, can be simply overridden in rendering functions with JS’s if/else

Render function 3

Pay attention to the return value of the render function; And learn about the use of functional components, which can be passed directly into the h function of the rendering function

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