Detailed analysis of Vue custom instructions and instruction definition functions (code)

Vue custom instructions can be defined globally or locally. Vue components are the reuse of html and code, while Vue instructions are extended reuse of DOM. Let’s take a closer look at the customization in Vue. Analysis of instructions.

1. Vue custom instructions: Use Vue.directive(id,definition) to register global custom instructions, and use the component's directives option to register local custom instructions.

2. Vue hook function:

The instruction definition function provides several hook functions (optional):

bind: only called once, the instruction is bound for the first time Called when an element is reached, this hook function can be used to define an initialization action that is executed once during binding.

inserted: Called when the bound element is inserted into the parent node (it can be called as long as the parent node exists and does not have to exist in the document).

update: The first time it is called immediately after bind, the parameter obtained is the initial value of the binding, and it is called later when the template where the bound element is located is updated, regardless of whether the binding value changes. By comparing the binding values ​​before and after the update, unnecessary template updates can be ignored (see below for detailed hook function parameters).

componentUpdated: Called when the template where the bound element is located completes an update cycle.

unbind: Called only once, when the instruction is unbound from the element.

3. Parameters of Vue hook function: (el, binding, vnode, oldVnode)

el: The element bound by the instruction can be used to directly operate the DOM.

binding: an object containing the following attributes

name: the instruction name, excluding the v- prefix;

value: the binding value of the instruction; for example: v- my-directive="1 1", the value of value is 2;

oldValue: the previous value bound by the instruction, only available in the update and componentUpdated hook functions, regardless of whether the value changes;

expression: the string form of the binding value; for example: v-my-directive="1 1", the value of expression is '1 1';

arg: the parameters passed to the instruction; For example: v-my-directive:foo, the value of arg is 'foo';

modifiers: an object containing modifiers; for example: v-my-directive.a.b, the value of modifiers is {'a ':true,'b':true}

vnode: The generated virtual node compiled by Vue;

oldVnode: The last virtual node, only available in the update and componentUpdated hook functions.

<p id="app" v-demo:foo.a.b="message"></p>

Vue.directive(&#39;demo&#39;, {
  bind: function (el, binding, vnode) {
      console.log(&#39;bind&#39;);
    var s = JSON.stringify
    el.innerHTML =
      &#39;name: &#39;       + s(binding.name) + &#39;<br>&#39; +
      &#39;value: &#39;      + s(binding.value) + &#39;<br>&#39; +
      &#39;expression: &#39; + s(binding.expression) + &#39;<br>&#39; +
      &#39;argument: &#39;   + s(binding.arg) + &#39;<br>&#39; +
      &#39;modifiers: &#39;  + s(binding.modifiers) + &#39;<br>&#39; +
      &#39;vnode keys: &#39; + Object.keys(vnode).join(&#39;, &#39;)
  }
});
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;hello!&#39;
  }
});

4. Function abbreviation: In most cases, we may want to perform repeated actions on the bind and update hooks, and do not want to care about other hook functions. You can write it like this:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

5. Object literal: If the instruction requires multiple values, you can pass in a JavaScript object literal. Remember, directive functions accept all legal types of Javascript expressions.

<p v-demo="{ color: &#39;white&#39;, text: &#39;hello!&#39; }"></p>

Vue.directive(&#39;demo&#39;, function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

Example analysis:

<p id="app">
    <my-comp v-if="msg" :msg="msg"></my-comp>
    <button @click="update">更新</button>
    <button @click="uninstall">卸载</button>
    <button @click="install">安装</button>
</p>
<script type="text/javascript">
    Vue.directive(&#39;hello&#39;, {
        bind: function (el){
            console.log(&#39;bind&#39;);
        },
        inserted: function (el){
            console.log(&#39;inserted&#39;);
        },
        update: function (el){
            console.log(&#39;update&#39;);
        },
        componentUpdated: function (el){
            console.log(&#39;componentUpdated&#39;);
        },
        unbind: function (el){
            console.log(&#39;unbind&#39;);
        }
    });

    var myComp = {
        template: &#39;<h1 id="msg">{{msg}}</h1>&#39;,
        props: {
            msg: String
        }
    }

    new Vue({
        el: &#39;#app&#39;,
        data: {
            msg: &#39;Hello&#39;
        },
        components: {
            myComp: myComp
        },
        methods: {
            update: function (){
                this.msg = &#39;Hi&#39;;
            },
            uninstall: function (){
                this.msg = &#39;&#39;;
            },
            install: function (){
                this.msg = &#39;Hello&#39;;
            }
        }
    })
</script>

a. When loading the page: bind inserted

b. Update component: update componentUpdated

c. Uninstall component: unbind

d. Reinstall the component: bind inserted

Note the difference: bind and inserted: when bind, the parent node is null, when inserted, the parent node exists; update and componentUpdated: update is before the data is updated. componentUpdated is after the data is updated.

6. Finally, the last actually developed instruction encapsulation implementation

Basic idea

import store from '@/store'

export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = store.state.permission.pagePermission
    if (value && typeof value === 'string' && value.length > 0) {
      const hasPermission = roles.some(role => {
        return role.permission == value
      })
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`need roles! Like v-permission="'button'"`)
    }
  }
}

Expose api to the outside

import permission from './permission'

const install = function(Vue) {
  Vue.directive('permission', permission)
}

if (window.Vue) {
  window['permission'] = permission
  Vue.use(install) // eslint-disable-line
}

permission.install = install
export default permission

Related recommendations:

Vue custom instructions implement v-tap plug-in

How to use Vue’s custom instructions to complete a drop-down menu

The above is the detailed content of Detailed analysis of Vue custom instructions and instruction definition functions (code). For more information, please follow other related articles on the PHP Chinese website!