Data driven

One of the core ideas of vue.js is data-driven. By data driven, we mean that the view is generated by data driven, and we don’t modify the view directly by manipulating the DOM, but by modifying the data which is basically the JS object data format. The DOM becomes a mapping of the data, and all of our logic is to make changes to the data without touching the DOM, making it easier to maintain and improve performance.

The target

Look for entry points and the process of rendering the template data into the DOM for display on the page.

Where is the new Vue entrance and what happened

1. Download the vUE source code

Making search vue direct download or git command: git clone – b dev HTTP: / / https://github.com/vuejs/vue

  1. The directory structure


  1. terms
  • Runtime: Includes only the runtime, not the compiler
  • Common: CJS specification for WebPack1
  • Esm :ES module for WebPack2 +
  • Umd :(nothing with ue. Js)universal module defintion compatible with CJS and amd for browsers
  1. To find the entrance
  • package.json
  • Find web scripts/config. Js – full – dev
  • It’s not clear what the web is at this point so let’s look at resolve and obviously it aliases the name
  • Find the scripts/alias. Js

SRC /platforms/web/entry- Runtime-with-compiler. js

  • SRC/platforms/web/entry – the runtime – with – compiler. Js entry documents, rewrite the mount, and to define the template there are three ways, el, template, render, execute the template parsing and compilation.


Let’s examine the code above that first caches the mount method on the prototype and then redefines that method. First of all, it restricts EL. Vue cannot be mounted on root nodes such as body and HTML. Next, if no render method is defined, the EL or template string is converted to the Render method. In Vue 2.0, all Vue components will eventually require the Render method, whether we develop the component in a single file, Vue, or write el or Template properties, which will eventually be converted to the Render method. So this process is Vue’s compilation process, which is implemented by calling compileToFunctions, which we’ll talk about later. Finally, the mount method on the original prototype is called.

  • Look for the vue constructor
  • SRC/platforms/web/runtime/index, js, define the mount
  • SRC /core/index Defines the global API
  • SRC /core/instance/index defines the constructor, and you can see here that initialization executes the _init() method
  • Go to initMixin() SRC /core/instance/init to define the initialization method

Vue mounting process

  1. Create the test/01-init. HTML folder under examples and open it in the browser
  1. Breakpoint execution location Execution at breakpoint entry
  1. Perform to the breakpoint to enter (SRC/core/instance/index. Js)
  1. Perform to the breakpoint to enter (SRC/core/instance/init. Js)
  1. Exe (SRC /platforms/web/entry- Runtime-with-compiler.js)
  1. Perform to the breakpoint to enter (SRC/platforms/web/runtime/index. Js)

In the above code, the mount method supports passing two arguments. The first is el, which represents the mounted element, and if it exists and the browser environment calls the Query method to convert it into a DOM object. The second parameter is related to server rendering, and we don’t need to pass the second parameter in the browser environment.

  1. $will actually go to the mount method calls mountComponent (SRC/core/instance/lifecycle. Js) two places the breakpoint The first execution will first create a watcher to 4074 line to 4067 line and then into the second execution

In the above code, you can see that the core of the mountComponent is to call the vm._render method to become a virtual Node and then instantiate a Watcher, which calls the updateComponent method in its callback function. The final call to vm._update updates the DOM.

Watcher performs two functions here, one is to perform the callback function when the vm is initialized, and the other is to perform the callback function when the monitored data in the VM instance changes.

If vm._isMounted is set to true on the root node, it indicates that the instance is mounted and the mounted hook function is executed. Vnode is the parent virtual Node of the Vue instance, so Null means the current instance of root Vue.

  1. . At this point is entering the vm and _render method for virtual dom implementation to the breakpoint will quit at the last interface and then again into the (SRC/core/instance/render. Js)
  1. Once again into the vm. _update method convert virtual dom to real dom and then replace the el node rendering to the page (SRC/core/instance/lifecycle. Js)
  1. After 3946 lines are executed, skip to the next page

Conclusion:

In the next article we’ll take a closer look at what vm._update and vm._render have done.