The first step, Vue initialization, instance members, static members
First carry out the initialization of vue, that is, initialize instance members and static members.
The second step, new Vue()
After the initialization, call the Vue constructor new Vue(), and call the this._init() method in the constructor
The third step, this.init()
this.init() is equivalent to the entrance of the entire project. In this method, vm.$mount() is finally called
The fourth step, vm.$mount()
This $mount() is src/platform/web/entry-runtime-with-compiler.jsdefined in. The core function is to compile the template into a render function to determine whether there is a render option. If not, it will get the template option. If there is no template, the content in el will be used as a template. The compileToFunctions() method compiles the template into a render function. After the compilation is complete, the render is stored in options.render.
The fifth step, vm.$mount()
Call src/platforms/web/runtime/index.jsthe $mountmethod in the file , this method will get el again, because if it is the runtime version, it will not go through entry-runtime-with-compiler.jsthis entry to get el, so if it is the runtime version, we will be in the runtime/index.js $ Re-obtain el in mount().
The sixth step, mountComponent(this,el)
This method src/core/instance/lifecycle.jsis defined in, first determine whether there is a render option. If there is no render option, but the template is passed in, and the current development environment is the development environment, a warning is issued (the runtime version does not support the compiler), and the beforeMount hook function is triggered (before mounting ), the updateComponents function is defined but not called. In this function, the render() and update() methods are called. Render is to generate virtual dom, and update is to convert virtual dom into real dom and mount it on the page.
Create a Watcher instance object. When creating, pass the function updateComponents, and then call the get method. After the creation is completed, the hook function mounted() is triggered, the mounting ends, and the vue instance is returned.
The seventh step, Watcher.get()
After the watcher is created, get will be called once, and updateComponent() will be called in the get method. UpdateComponent will call the render() passed in during instantiation or the render() generated after the template is compiled, and return to vnode. Then call vm._update(), call the vm.__patch__ method, convert the virtual dom into real dom and mount it on the page, and record the generated real dom in vm.$el()