When to use it

When there is logic to manipulate DOM/BOM in our methods, we should consider whether it can be abstracted into a custom instruction.

start

  1. How to parse the instructions on the template;
  2. How to get the set instruction hook;
  3. How to call the hook function internally;

Command parsing

<div v-test v-test2></div>
Copy the code

The rendering function to which this instruction will be parsed is:

with(this) {    
    return _c('div', {        
        directives: [{            
            name: "test",            
            rawName: "v-test"
        },{
            name: "test2",
            rawName: "v-test2"
        }]
    })
}
Copy the code

Fetch instruction hook

  1. Get all old node instructions and new node instructions;
  2. Bind the corresponding hook function to the instruction when obtaining it;

Call hooks

The parameters in the hook function, except for el, should be read-only and should not be modified. If you need to share data between hook functions, it is recommended to do so through the element’s dataset.

The directive’s hook functions are all executed in the updateDirectives method, and the following five hook functions are executed according to different scenarios

bind

Only called once, the first time a directive is bound to an element. This is where you can perform one-time initialization Settings

inserted

Whereas a inserted node is triggered after the DOM has inserted a parent node (the parent is guaranteed to exist, but not necessarily inserted into the document), a inserted node is processed before the DOM is inserted, so it cannot be triggered directly, only saved until the node has been inserted. So a inserted is divided into two steps: collect and execute:

collect

  1. Create array dirsWithInsert;
  2. If only instructions are contained in the new node, and there is a INSERTED, the dirsWithInsert queue is added;
  3. The INSERTED hook function is executed after all instructions are collected;
perform

  1. Inserted Hook Is triggered after all nodes have been inserted, rather than once after a node has been inserted.
  2. Iterate over the collected set of dirsWithInsert instructions, and execute the corresponding INSERTED hook function.

update

Called when the component’s VNode is updated, but may occur before its child VNodes are updated. The value of the instruction may or may not have changed. But you can ignore unnecessary template updates by comparing the values before and after the update.

componentUpdated

Called after the VNode of the component where the directive resides and its child VNodes are all updated. This hook is similar to the INSERTED, except that the flow is different. ComponentUpdated Hooks are executed as soon as a node is updated, meaning to include its internal children.

Inserted and componentUpdated differences
  1. Inserted Is the inserted hook after all nodes, including their children, have been inserted.
  2. ComponentUpdated hooks are executed as soon as a node is updated;

unbind

Only called once, when an instruction is unbound from an element

Vue series of courses

Vue source code analysis will be conducted in succession recently, a series of courses are as follows:

The state series

  1. Principle of props
  2. Principle of the methods
  3. Principle of the data
  4. Principles of the computed
  5. Watch the principle

Lifecycle series

  1. Life cycle principle

The event series

  1. Principle of the event

Render series

  1. Render principle

Inject/dojo.provide series

  1. Inject/dojo.provide principle

The plugins series

  1. Vue – principle of the router
  2. Vue Router stuff
  3. Vuex something you should know
  4. Vue source code analysis of vuex principle
  5. Vue custom plug-in

Component series

  1. Keep alive – principle
  2. Vue single file component
  3. Communication between Vue components
  4. Vue virtual list

Series of instructions

  1. Vue custom command
  2. Caching principles for vue source code parsing

The algorithm series

  1. Principle of diff
  2. Vue compiler source code analysis

Asynchronous tasks

  1. NextTick principle of vUE source code parsing

other

  1. Vue unit tests
  2. Vue multicast components
  3. Things you didn’t know about Vue
  4. Vue skills big decryption
  5. Interview – VUE data responsive implementation of advanced front-end