Learning goals

The $mount method is implemented

Entrance to the file

1.src\platforms\web\entry-runtime-with-compiler.js

This file extends the $mount method, so start with that file

  • Main function: extend $mount method, parse option render template el processing method
  • Core method: compileToFunctions

CompileToFunctions This method gets the corresponding Render function from the template

2.src\platforms\web\runtime\index.js

  • File main function: $mount method initialization place
  • Core method: mountComponent

3.src\core\instance\lifecycle.js

  • The mountComponent file is used to initialize the mountComponent method

Core methodmountComponent

First of all, what exactly does this approach do

function mountComponent (vm: Component, el: ? Element, hydrating? : boolean){
   vm.$el = el
   ......
   callHook(vm, 'beforeMount')...let updateComponent;
   updateComponent = () = > {
         let re = vm._render();
         vm._update(re, hydrating)
   }
   
   new Watcher(vm, updateComponent, noop, {
    before () {
      if(vm._isMounted && ! vm._isDestroyed) { callHook(vm,'beforeUpdate')}}},true /* isRenderWatcher */)... callHook(vm,'mounted')}Copy the code

The above is the core code of this method.

1. Mount the EL object

$el = el

2. Run the beforeMount hook function

Code: callHook(VM, ‘beforeMount’)

3. Create updateComponent

Code:

updateComponent = () => {
         let re = vm._render();
         vm._update(re, hydrating)
}
Copy the code

4. Create the Watcher object and assign the updateComponent and component update functions to Watcher

Code:

new Watcher(vm, updateComponent, noop, { before () { if (vm._isMounted && ! vm._isDestroyed) { callHook(vm, 'beforeUpdate') } } }, true /* isRenderWatcher */)Copy the code

5. Run the Mounted hook function

CallHook (vm, ‘mounted’)

The $mount method is complete

conclusion

The content of day 2 is much simpler than the content of day 1, basically what vue does between the beforeMount and Mounted hook functions. El Is mounted before beforeMount. Parsing the template, generating the corresponding render function, and so on are all mounted before el beforeMount. Parsing the template, generating the corresponding render function, and so on are all mounted before el beforeMount. Parsing the template, generating the corresponding render function, and so on are all performed inside mount. Next, let’s look at how Watcher relates to DEP.