What did New Vue do? 🙄

A lot of times we’re asked is there anything wrong with the kidney in New Vue? This article we will have a good look!! 😁

Let’s start with source code debugging

A previous article covered vue source debugging, which is a good place to start.

Entrance to the file

When run dev is executed, we can retrieve the parameters according to the package.json configuration

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

At this point we can get a path scripts/config.js and the parameter TARGET:web-full-dev

inscripts/config.jsFiles can be seen in the defined Builds object foundweb-full-devThe corresponding property valueThis is where the entry file is foundsrc\platforms\web\entry-runtime-with-compiler.js

What does the entry file do?

You can see the extension in the code above$mountNext, we get the DOM element based on the parameter el passed in. And determine whether or notrender, if notrenderIs to findtemplate, if nottemplateAccording to the functiongetOuterHTMLwillelInternal content astemplateSo we can conclude thatrender template elThe priority of isrender > template > el. iftemplateYou need a functioncompileToFunctionswilltemplateCompile to get arenderDelta function, and put therenderSet to component options. And it was executedmountMethod.

Let’s get to the subject

Look for the constructor Vue

You can see from the entry file./runtime/indexFile to importVueTo enter the file.You can seecore/indexFile importedVueYou can also see the implementation$mountMethods.

Enter the filecore/indexYou can see from./instance/indexIn the importVueAnd a global Api initialization method is performedinitGlobalAPI, continue to enter./instance/indexFinally found itVueConstructor. inVueConstructor_initMethods. A series of blends are also performed below. Can be found ininitMixinFound in the_initMethods. So let’s see_initWhat did the method do?

What does _init in the constructor do?

Here we can see the sequence of processes very clearly. The merging of attributes is followed by various initializations.

  • initLifecycle– > definition$parent,$children,$root,$ref
  • initEvent-> Listen for some custom events
  • initRender– > definition$slots,$createElementAnd let$attrs $listenersBecome responsive
  • Execution life cyclebeforeCreate
  • initInjections-> Get grandparent injected data
  • initState-> Data initialization:data,props,methods,computed,watch
  • initProvide-> Provide the data to future generations
  • Execution life cyclecreated
  • Perform a mount

How to mount

Back to the implementation I just mentioned$mountMethod filecore/indexA slave file is returnedcore/instance/lifecyclefunctionmountComponentThe first thing we do before we execute this function is we extend it$mountDelta function, you can get it thererender. inmountComponentTo perform thebeforeMountHook, and thennew WatcherperformupdateComponentFunction. The main thing that this function does is pass_render()functionrenderInto the virtual DOM, through_updateInsert the virtual DOM into the real DOM and execute itmountHook function

conclusion

The above is probably my understanding of the new Vue dry a series of operations, if there is any improvement, welcome to leave a message oh ~~~ finally come to a mind map