The cause of

Recently, I finally learned the skills of making pictures and typesetting. Now I look back at the articles I wrote before. Hot eyes, really want to give oneself a slap, what is written before ~

However, I can’t delete what I’ve already written, so I have to make a series in the future to string together what I’ve written before (well, it’s a big project, I’m used to digging my own holes and jumping by myself).

Before I wrote an article about Vue source code, but after a month to see, whether typeset or understanding of the source code is not satisfactory, so this time I hope to write a better structure, I hope to help you

Start with new Vue

I’m going to post my current version number: [email protected], directory address: vue\ SRC \core\instance\index.js, this file is not a lot of code, just a few lines, and I’ve commented them all:

Ctrl + left click on initMixin(Vue) below to see this._init(options).

Now that makes sense, the next thing you need to do is prepare to mount the DOM, but you need to generate a virtual DOM before you mount it. You should know why you need a virtual DOM, but I’ll write it down here in case you forget: There are so many properties on each DOM element that every time you manipulate the DOM, the browser has to manipulate the DOM over and over again. So let me give you a picture of how horrible the properties of each DOM element are

The virtual DOM only needs to implement the necessary attributes, and then with the DIff algorithm, so as to update the page efficiently.

Go back to $mount, and its directory is: vue\ SRC \platforms\web\runtime\index.js

mountComponent

This function is important because it is responsible for mounting the component:

Come here, the most important stage of mount is finished, hard to see here friends! So I’m going to show you some pictures to slow your eyes:

Conclusion a

Through the above content, we know the answers to several frequently met questions:

  • Not in thebeforeCreateSince data cannot be stored, so two-way data binding is not possible, butcreatedHooks can be
  • Only in themountedLifecycle access to the DOM, becauseMountComponent functioninbeforeMountAfter the hook,mountedBefore the call
  • A component in Vue corresponds to a Watcher, executed from the Watcher agentUpdateComponent methodYou can see that a Watcher is executing instead of a WatcherUpdateComponent method

Now to see how Vue 2.x data-driven views work, we have to go back to the initData part of initState

We are then led to the observe function, which calls the Observer constructor, which evaluates the value passed in to the array:

Let’s focus on this. Walk method:

The simplified code looks like this:

Another article on responsive data processing will follow, because there are too many points to explore ~

Conclusion two

Through the above code, we know Vue’s processing of data. The details will be written in combination with the interview questions later, so that we should see more exciting

After the new Vue, the code executes to initState, then initData, and finally calls the Observer constructor for data binding, where arrays are treated specifically. Iterate through object.defineProperty recursively, collecting dependencies as you iterate, associating the rendering Watcher with the current data until all data has been processed. There’s a lot more to go on here, but that’s already said, and we’ll talk about that in conjunction with the interview questions

Finally, I’ll show you a brain map, but it’s not a big production, it’s just a summary of the article, but it will be enriched as the article goes on, okay

Mind maps and pored over

This article was typeset using MDNICE