This is the 7th day of my participation in the August Text Challenge.More challenges in August

One, foreword

In the previous part, the diFF algorithm was combed by stages, mainly involving the following points:

  • Initial rendering and view update process;
  • Diff algorithm outer layer update;
  • Comparison optimization of DIff algorithm;
  • Diff algorithm out-of-order alignment;
  • Initial render and update render judgment;

This article introduces the initialization process of components;

Second, the use of components

1. Component introduction

Components come from WebComponent, a Web component; Native support for custom tags, but compatibility is poor;

So, Vue and React implement a set of component apis;

2. Component definition

In VUE, components are divided into “global components” and “custom components”, which are defined as follows:

2.1 Global Components

<body>
  <div id="app1">
    <! -- My-button can be used -->
    <my-button></my-button>
  </div>
  <div id="app2">
    <! -- My-button can be used -->
    <my-button></my-button>
  </div>
  <script>
    Vue.component('my-button', {template:'<button>Hello Vue</button>'
    })
    new Vue({
      el: "#app"
    });
  </script>
</body>
Copy the code

Global components via Vue.component(‘ XXX ‘,{… }) definition, can be used at global scope;

2.2 Local Components

<body>
  <div id="app1">
    <! -- Can be used -->
    <my-button></my-button>
  </div>
  <div id="app2">
    <! -- Do not use -->
    <my-button></my-button>
  </div>
  <script>
    new Vue({
      el: "#app1".// Declare local components - can only be used in declare scope APP1
      components: {'my-button': {template:''}}});</script>
</body>
Copy the code

A local component that can only be used in a declaration scope;

3. Component priority

<body>
  <div id="app">
    <my-button></my-button>
  </div>
  <script>
    // Global components
    Vue.component('my-button', {template:''
    })
    new Vue({
      el: "#app".// Local components
      components: {'my-button': {template:''}}});</script>
</body>
Copy the code

Global components and local components with the same name exist at the same time. Local components are preferentially used according to component lookup rules.

Global and local component definitions with the same name are not overwritten, but are looked up step by step like a prototype chain;

Introduction to the component initialization process

1, Vue.com ponent API

Vue.com Ponent is a global API;

The initGlobalAPI method at Vue initialization focuses on the Vue GlobalAPI

// Method definition
Vue.component = function (id, definition) {}
Copy the code

2, the Vue. The extend

In Vue.com Ponent, when the second argument definition is an object, vue.extend is called by default.

Vue.extend: Create a subclass using the base Vue constructor; That is, the component’s constructor;

Save the component constructor

Save the mapping between component names and constructors in the global Vue.options.components object.

Note: Global attributes must be used in global components to facilitate component merging.

4. Component merge

At Vue initialization, the _init method takes the mergeOptions merge option;

Internally, “global component” and “local component” are merged through component merge strategy.

Note: Vue.options.components are included in vm. Constructor. options

Component search rules: first find yourself, can not find through the chain to find the father;

5. Component merge strategy

Template compilation process: HTML template -> AST syntax tree -> render function;

In the render function, tags and components are processed by _c (createElm);

CreateComponent method: Creates a component virtual node componentVnode

6. Initial rendering and updating of components

According to the virtual node of the component, create the real node of the component. And insert the component into the parent element;

When a component is initialized, a Watcher is created for each component;

Dependency collection: Properties collect the watcher records rendered by the corresponding component into the DEP;

When a component is updated, traversal notifies the corresponding Watcher in the DEP array to update the component;

Four, the end

This article introduces the Vue components and initialization process, involving the following parts:

  • Component usage: Component definition and priority;
  • Component initialization process: Vue.component, vuue. Extend, save component constructor, component merge, initial render and update;

Next, Vue.com Ponent implementation;

Maintain a log

20210808:

  • Updated article titled “Components Part – Introduction to Vue Components and Initialization Process”;
  • Adjust “Introduction to Component Initialization Process” : reflect the main links in the component initialization process and the corresponding article update plan;

20210813:

  • Revise some words and spelling mistakes;