“This is the third day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Prepend content

Why learn Vue source code?

  1. At work
  2. To cope with the interview
  3. To deepen theVueThe understanding of the
  4. Improve your problem solving skills
  5. Enhance your ability to read source code

How do YOU avoid drowning in source code?

Find a thread

How about writing a simple vuE3 code and then thinking about how to run it?

  1. createApp
  2. app.mount()
  3. When did the data change
  4. How is the page updated

.

Branching off from the main line

When the main line after the completion of learning, there are many other branch problems, details do not understand, this time, we need to diverge from the main line of new problems, with the problem to find the answer in the source code.

To build the wheels

After we have sorted out the basic source code of VUe3, we can try to write a Mini-Vue. In this process, there is a high probability that we will encounter new problems and try to solve them again. When we write out the mini-Vue, a complete output will be formed. This process will systematically connect the knowledge points learned before to form a complete system.

Feynman method of learning

When we try to explain what we have learned to others, we may find that some of the problems are not fully understood, and some of the connections between the points are not smooth enough. So this process forces us to consolidate what we didn’t know before, and when we can fully convey the relevant knowledge to others, it shows that we have really learned it. At the same time, such a process of output will also help partners who need relevant knowledge. It will not only help others, but also point out their shortcomings and give them positive feedback from others. It can be said that four things can be achieved in one move.

Environment set up

Clone source

At present, the vue3 warehouse is in vue-next at this address. Friends can clone the warehouse at this address.

Install dependencies

Go to the project directory and open the terminal. Note that package management has been switched to PNPM since Vue 3.2, so PNPM install is used here. If you haven’t already installed PNPM, you’ll need to install it globally.

packaging

Because we are currently learning the source code, we want to package it in the same way as dev, and to see the source code for debugging, so we add –sourcemap to dev.

"dev": "node scripts/dev.js --sourcemap"
Copy the code

Next, we run PNPM dev.

When you see the following output, the package is complete and in a waiting for changes state, meaning the file will be repackaged if it changes. Packaging output file on the packages/vue/dist/vue. Global. Js.

Start the service

There is a serve command in package.json to help us start the service. Run PNPM serve in the terminal (the previous package service can be terminated, or a new terminal window can be opened to run this command). If the following page is displayed, the service is successfully started.

Open the corresponding local service address

Next open the Packages/Vue/Examples directory, which will contain some classic examples that VUE has prepared for us. For example, if we go to Composition/Todomvc, this is a classic Todolist case. At this point open the console can be debugged ~

The source code to debug

Open the Todomvc page, open the Source TAB of the Chrome console, and use CMD + P shortcut keys to open the todomvc file. Here we use createApp as an example, find the createApp method call, and hit the breakpoint.

The page is then refreshed and the script stops at the breakpoint. Click the down arrow on the right

The createApp method defines packages/ Runtime-dom/SRC /index.ts.

And navigate to the location defined by the createApp method.

To see how createApp is implemented, you can go to 😁 for packages/ Runtime-dom/SRC /index.ts

That’s all for this article. Give it a thumbs up if you like! 😜 will continue to output Vue source learning articles, interested in a point of concern! 😁

If you have any questions or suggestions, please leave a comment!