preface

Vue3.0 was officially released in September last year, and it is getting more and more popular. Xiaobian at this time with an excited heart to follow the big guy deep source code, let me explore the unique charm brought by Vue3.0.

First of all,

Before starting to study the source code, xiaobi would like to thank our B station Up Lord [village chief] is Vue3 Contributor also have to be a bell person, of course, follow the source contributors dig together, explore the story behind it, it can be said that the dry full of ~ ~ ha ha ha!! , other partners must pay attention to the anchor, learning front-end not lost.

The body of the

Ok ~ ~ said a lot of, next let me enter the road of Vue3.0 exploration.

1. Clone the source code from github: github.com/vuejs/core.

IO /installatio /installatio /installatio /installatio /installatio /installatio /installatio /installatio

3. In order to enable our project to quickly install dependency modules, we need to delete the following two items in the project directory file

Puppeteer is a Node library that calls Chrome’s API to manipulate the Web

We’re not going to use it in our project, so. Just kill it.

4. Run PNPM install to start the dependency installation. If the following status is displayed, the dependency installation is successful.

5. Then we need to add a code to the directory file, in order to better facilitate us to find the dependencies of each package.

6. Run the NPM run dev command to start packing. No matter what kind of packaging tool we use for Vue3.0 projects, Webpack or Vite, one of the most important things we use in our projects is

import * from “vue”

Therefore, we infer that the API of vue is imported from this package name, so the package name vue must exist in the source code

Sure enough, there is a vue package in the source code and the next thing we need to start with is this file

First of all, I want to set up a clear direction in learning source code, that is, we want to start from which method, here xiaobian will start from two places. One starts with creating the component instance (createApp()), and the other starts with mounting () from the root element. Second, we open the todomvc.html file and enter it with a breakpoint under createApp(), and we see that the method creating the component instance is one ensureRenderer().

Second, we can find the function from the dependency package vue => runtime-dom/ SRC by using the breakpoint. Then you can find it in the source codeindex.tsThere will be three dependencies in the file, which are obviousruntime-dom 和 compiler-domIs already introduced in this file, but there is also an implicit dependencyreactivity

erDiagram
vue ||--o{ runtime-dom : import
vue ||--o{ compiler-dom : import
runtime-dom ||--o{ runtime-core : import
vue ||--o{ reactivity : import

So for project initialization, we just need to explore the vUE => compiler-DOM line. EnsureRenderer () we see that this method returns a renderer that is “ensureRenderer” or created with the createRenderer.

renderer => createRenderer => renderer.ts

The createRenderer function returns a function called baseCreateRender, which is by far the largest factory function in Vue3.0, with over two thousand lines of code. Finally locked at line 2358 here we finally see that the renderer is returning an object.

The attributes returned here have already been commented on the diagram, so we won’t explain them here. So let’s go to createAppAPI and see.

See here we are not familiar with it, yes!! So the method that this function returns to us is the API on the createApp instance, and we need to focus on the mount function here, When we expand this function, we’ll see that the configuration objects we actually pass to createApp will eventually be treated by vue as rootComponent.

The mount function is executed only once after the instance is created and mounted to the host element. The first execution of the mount function creates the configuration object passed in as a VNode (virtual DOM), which is then rendered into a real DOM tree using the render function and patch method.

Vue works: Create instance => get a rootComponent => generate vNode (virtual DOM) => render(vnode, rootComponent) => Patch () => real DOM

conclusion

This chapter content without learning much deeper source code, is at the beginning of the study the source code to find the breakthrough point, to follow a common thread to go further, can through the browser breakpoint way to debug, pain can directly run the script to cut before, in the first part to this end, the subsequent will continue to update Vue3.0 source exploration.