Detailed explanation of custom instructions for Vue.js source code analysis

Preface

In addition to the default built-in directives for core functionality (v-model and v-show), Vue also allows you to register custom directives.

The official website introduction is relatively abstract and seems very grand. My personal understanding of custom instructions is that when custom instructions act on some DOM elements or components, the element can perform some specific operations (hook function ()) when it is first rendered, inserted into the parent node, updated, or unbound.

There are two ways to register custom directives. One is global registration, which uses Vue.directive (directive name, configuration parameters) to register. After registration, all Vue instances can use it. The other is local registration. When creating a Vue instance, a local directive is created through the directives attribute. Local custom directives can only be used in the current Vue instance.

Custom instructions can be bound to the following hook functions:

·bind; is called only once. After the element is rendered into a DOM node, it is called when the initialization work of the directives module is executed. Here, a one-time initialization setting can be performed.
· inserted; called when the bound element is inserted into the parent node (it is only guaranteed that the parent node exists, but not necessarily has been inserted into the document).
·update; Called when the VNode of the component is updated, but it may happen before its child VNodes are updated. The value of the instruction may or may not have changed.
·componentUpdated; called after the VNode of the component where the instruction is located and its child VNodes are all updated.
unbind; Called only once, when the instruction is unbound from the element.

Each hook function can have four parameters, namely el (corresponding DOM node reference), binding (some extended information about the instruction, an object), vnode (the virtual VNode corresponding to the node) and oldVnode (the previous VNode, only available in update and componentUpdated hooks)

When the bind hook function is executed, the DOM element is rendered, but it is not inserted into the parent element, for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="d"><input type="" name="" v-focus></div>
    <script>
        Vue.directive('focus', {       
            bind:function(el){console.log(el.parentElement);}, //Print parent node inserted: function (el) {console.log(el.parentElement);el.focus()} //Print parent node and focus the current element })
        var app = new Vue({el:"#d"})
    </script>
</body>
</html>

The output is as follows:

You can see that the input element automatically gains focus, and the console output is as follows:

It can be seen that for the bind() hook, its parent node cannot be obtained, because Vue will insert the current element into the child node of the parent element only after executing the bind() hook.

Source code analysis

The processAttrs() function is executed when parsing the template to convert the DOM into an AST object, as follows:

function processAttrs (el) { //Parse Vue attributes var list = el.attrsList; 
  var i, l, name, rawName, value, modifiers, isProp;
  for (i = 0, l = list.length; i < l; i++) { //Traverse each attribute name = rawName = list[i].name;
    value = list[i].value;
    if (dirRE.test(name)) { //If the attribute starts with v-, @ or :, it means this is a Vue internal directive // mark element as dynamic
      el.hasBindings = true;
      // modifiers
      modifiers = parseModifiers(name);
      if (modifiers) {
        name = name.replace(modifierRE, '');
      }
      if (bindRE.test(name)) { // v-bind //bindRD is equal to /^:|^v-bind:/, that is, when the attribute is a v-bind instruction /*v-bind branch*/
      } else if (onRE.test(name)) { // v-on
        /* branch of v-on */
      } else { // normal directives
        name = name.replace(dirRE, ''); //Remove the instruction prefix, for example, v-show is equal to show after execution
        // parse arg
        var argMatch = name.match(argRE);
        var arg = argMatch && argMatch[1];
        if (arg) {
          name = name.slice(0, -(arg.length + 1));
        }
        addDirective(el, name, rawName, value, arg, modifiers); //Execute addDirective to add a directives attribute to el if ("development" !== 'production' && name === 'model') {
          checkForAliasModel(el, value);
        }
      }
    } else {
      /*Non-Vue directive branch*/
    }
  }
}

addDirective will add a directives attribute to the AST object to save the instruction information, as follows:

function addDirective ( // Line 6561 is related to the instruction. Add a directives attribute to the AST object el, with the value being the information of the instruction el,
  name,
  rawName,
  value,
  arg,
  modifiers
) {
  (el.directives || (el.directives = [])).push({ name: name, rawName: rawName, value: value, arg: arg, modifiers: modifiers });
  el.plain = false;
}

When the p element in the example is executed here, the corresponding AST object is as follows:

Next, when generate generates the rendre function, the genDirectives() function will be executed to convert the AST into a render function, as follows:

with(this){return _c('div',{attrs:{"id":"d"}},[_c('input',{directives:[{name:"focus",rawName:"v-focus"}],attrs:{"type":"","name":""}})])}

Finally, after rendering is completed, the create hook function of the directives module will be executed, as follows:

var directives = { //Line 6173 directives module create: updateDirectives, //Hook after creating DOM update: updateDirectives,
  destroy: function unbindDirectives (vnode) {
    updateDirectives(vnode, emptyNode);
  }
}

function updateDirectives (oldVnode, vnode) { //Line 6181 oldVnode: old Vnode, vnode only available when updating: new VNode
  if (oldVnode.data.directives || vnode.data.directives) {
    _update(oldVnode, vnode);
  }
}

_updat is used to initialize and update the processing instructions, as follows:

function _update (oldVnode, vnode) { //Initialization/update instruction on line 6187 var isCreate = oldVnode === emptyNode; //Is it initialization var isDestroy = vnode === emptyNode;
  var oldDirs = normalizeDirectives$1(oldVnode.data.directives, oldVnode.context);          
  var newDirs = normalizeDirectives$1(vnode.data.directives, vnode.context); //Call normalizeDirectives$1() function to normalize parameters var dirsWithInsert = [];
  var dirsWithPostpatch = [];

  var key, oldDir, dir;
  for (key in newDirs) { //Traverse newDirs
    oldDir = oldDirs[key]; //key directive information on oldVnodedir = newDirs[key]; //key directive information on vnodeif (!oldDir) { //If oldDir does not exist, it is a new directive// new directive, bind
      callHook$1(dir, 'bind', vnode, oldVnode); //Call callHook$1() function, parameter 2 is bind, that is, execute the bind function of v-focus instruction if (dir.def && dir.def.inserted) { //If there is an inserted hook function defined dirsWithInsert.push(dir); //Save it to the dirsWithInsert array}
    } else {
      // existing directive, update
      dir.oldValue = oldDir.value;
      callHook$1(dir, 'update', vnode, oldVnode);
      if (dir.def && dir.def.componentUpdated) {
        dirsWithPostpatch.push(dir);
      }
    }
  }
  if (dirsWithInsert.length) { //If dirsWithInsert exists (that is, the inserted hook function is bound)
    var callInsert = function () { //Define a callInsert function that will execute each function in dirsWithInsert for (var i = 0; i < dirsWithInsert.length; i++) {
        callHook$1(dirsWithInsert[i], 'inserted', vnode, oldVnode);   
      }
    };
    if (isCreate) { //If it is initialized mergeVNodeHook(vnode, 'insert', callInsert); //Then call mergeVNodeHook() function } else {
      callInsert();
    }
  }

  if (dirsWithPostpatch.length) {        
    mergeVNodeHook(vnode, 'postpatch', function () {
      for (var i = 0; i < dirsWithPostpatch.length; i++) {
        callHook$1(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode);
      }
    });
  }

  if (!isCreate) {
    for (key in oldDirs) {
      if (!newDirs[key]) {
        // no longer present, unbind
        callHook$1(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy);
      }
    }
  }
}

writer by: Great Desert QQ: 22969969

For the bind hook function, it is executed directly, while for the inserted hook function, the function is saved in the dirsWithInsert array, and then a callInsert function is defined. The function accesses the dirsWithInsert variable through the scope, and traverses the variable to execute each inserted hook function in turn.

The mergeVNodeHook() hook function saves insert as a hooks attribute to the corresponding Vnode's data. When the Vnode is inserted into the parent node, the hooks will be called, as follows:

function mergeVNodeHook (def, hookKey, hook) { //Line 2074 merges the VNode hook function def: a VNode hookKey: (event name, such as: insert) hook: callback function if (def instanceof VNode) { //If def is a VNode
    def = def.data.hook || (def.data.hook = {}); // reset it to VNode.data.hook. If VNode.data.hook does not exist, initialize it to an empty object. Note: VNode.data.hook does not exist for ordinary nodes.
  }
  var invoker;
  var oldHook = def[hookKey];
 
  function wrappedHook () {     
    hook.apply(this, arguments); //Execute the hook function first // important: remove merged hook to ensure it's called only once
    // and prevent memory leak
    remove(invoker.fns, wrappedHook); //Then remove wrappedHook from invoker.fns so that the package is only executed once}

  if (isUndef(oldHook)) { //If oldHook does not exist, that is, the hookKey hook function has not been defined before // no existing hook
    invoker = createFnInvoker([wrappedHook]); //Directly call createFnInvoker() to return a closure function with the parameter being the callback function to be executed} else {
    /* istanbul ignore if */
    if (isDef(oldHook.fns) && isTrue(oldHook.merged)) {
      // already a merged invoker
      invoker = oldHook;
      invoker.fns.push(wrappedHook);
    } else {
      // existing plain hook
      invoker = createFnInvoker([oldHook, wrappedHook]);
    }
  }

  invoker.merged = true;
  def[hookKey] = invoker; //Set the hookKey property of def to point to the new invoker
}

createFnInvoker is the function corresponding to the v-on instruction. It uses the same API. After execution, we insert invoker into the VNode.data.hook corresponding to input, as follows:

Finally, after the VNode is inserted into the parent node, the invokeCreateHooks() function will be executed. This function will traverse VNode.hook.insert and execute each function in turn, and it will execute our custom defined inserted hook function.

Summarize

This is the end of this article about custom instructions for Vue.js source code analysis. For more relevant Vue.js custom instructions, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of Vue.js directive custom instructions
Detailed explanation of learning and using Vue.js custom instructions
A brief discussion on how to implement custom drop-down menu instructions in Vue.js
Detailed explanation of Vue.js component reusability mixin method and custom directives
Detailed implementation of vue.js internal custom instructions and global custom instructions (using directive)
Basic usage details of Vue.js custom instructions

<<: Detailed explanation of MySQL master-slave database construction method

>>: Using nginx + fastcgi to implement image recognition server

MySQL 5.7.21 winx64 installation and configuration method graphic tutorial under Windows 10

Detailed explanation of custom instructions for Vue.js source code analysis

Preface

Source code analysis

Summarize

MySQL 5.7.21 winx64 installation and configuration method graphic tutorial under Windows 10

Detailed tutorial on installing JDK8 on Linux system (CentOS7 installation)

Steps to install GRUB on Linux server

MySQL master-slave synchronization, implementation principle of transaction rollback

Summary of 10 advanced tips for Vue Router

How to limit the number of concurrent connection requests in nginx

Detailed explanation of the implementation process of Nginx enabling Brotli compression algorithm

How to implement the jQuery carousel function

HTML Tutorial: Collection of commonly used HTML tags (5)

IE6 distortion problem

Recommend

MySQL database query performance optimization strategy

Implementation steps for installing FTP server in Ubuntu 14.04

Example code for implementing a QR code scanning box with CSS

How to implement page screenshot function in JS

How to use & and nohup in the background of Linux

Detailed explanation of CSS style cascading rules

Detailed explanation of Docker container data volumes

Perfect solution for theme switching based on Css Variable (recommended)

Some references about colors in HTML

Nginx cache files and dynamic files automatic balancing configuration script

Why should the number of rows in a single MySQL table not exceed 5 million?

In-depth understanding of JavaScript event execution mechanism

VUE render function usage and detailed explanation

Detailed explanation of the solution to Tomcat's crash when double-clicking startup.bat

Example code for implementing photo stacking effect with CSS