This is the 16th day of my participation in Gwen Challenge.

preface

Directive is a v-prefixed special feature provided by vue.js. The value of the directive property is expected to be a single JavaScript expression. The responsibility of the directive is to apply the collateral effects of an expression to the DOM in response to changes in its value.

Instruction Principle Overview

In the template parsing stage, we parsed the instructions to AST, and then realized the functions of some built-in instructions in the process of generating code strings using AST. Finally, we triggered the hook function of custom instructions to make the instructions take effect in the process of virtual DOM rendering.

  • During the template parsing phase, the instructions on the node are parsed out and added to the ASTdirectivesAttribute.
  • thendirectivesThe data is passed to the VNode and is then passed throughvnode.data.directivesGets the instruction bound to a node
  • When the virtual DOM is patched, hook functions are triggered based on the comparison results of the nodes. The program that updates the instruction listenscreate,updateanddestroyWhen the three hook functions are triggered, VNode and oldVNode are compared, and finally the instruction’s hook function is triggered according to the comparison result.

Overview of the principle of V-IF instruction

<li v-if="has">if></li>
<li v-else>else</li>
Copy the code

During the code generation phase of template compilation, a code string like this is generated:

(has) 
? _c('li', [_v('if')]) 
: _c('li', [_v('else')])
Copy the code

Overview of the principle of THE V-for instruction

<li v-for="(item, index) in list">v-for {{index}}</li>
Copy the code

During template compilation, this code string is generated:

_l(list, function(item, index){
    return _c('li', [
        _v('v-for ' + _s(index))
       ])
})
Copy the code

_l is the alias of the function renderList. When this code string is executed, the _L function loops through the list variable and calls the functions passed by the second argument in turn. At the same time, two arguments are passed: item and index. In addition, when the _c function is called, the _v function is executed to create a text node.

V – on command

The V-ON directive binds event listeners whose type is specified by the parameter. It listens for native DOM events when used on ordinary elements; When used on custom element components, you can listen for custom events triggered by child components.

From template parsing to VNode generation, the final events are stored in VNode, and all events registered by a node can be retrieved via vnode.data.on.

<buttton v-on:click="doSomething"></button>
Copy the code

In the resulting VNode, we can read the following event objects from vnode.data.on:

{
    click: function(){}}Copy the code

The process-binding logic sets the CREATE and UPDATE hook functions, respectively, which means that during patching, event-binding processing logic is triggered every time a DOM element is created or updated. The process logic for event bindings is a function called updateDOMListeners, and both the Create and Update hook functions execute this function. The code is as follows:

let target
function updateDOMListeners(oldVnode, vnode) {
    if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)){
        return;
    }
    const on = vnode.data.on || {};
    const oldOn = oldVnode.data.on || {};
    target = vnode.elm
    normalizeEvents(on)
    updateListeners(on, oldOn, add, remove, vnode.context)
    target = undefined
}
Copy the code

To be continued…