Directives and instructions

  • Built-in instructions:v-if v-for v-show v-html(instructions tov-At the beginning)

So how do we make a custom directive?

Declare a global directive

Vue.directive(‘x’,directiveOptions) allows you to use v-x in any component

Declare a local directive
new Vue({ ... , directives:{ "x":directiveOptions } })Copy the code

Now that we know how to declare it, what are the properties of directiveOptions?

  • bind(el,info,vnode,oldVnode)– similar to thecreated
  • inserted(el,info,vnode,oldVnode)– similar to themounted
  • update(el,info,vnode,oldVnode)– similar to theupdated
  • componentUpdated(el,info,vnode,oldVnode)
  • unbind(el,info,vnode,oldVnode)– similar to thedestroyed

Speaking of binding, we usually use V-ON to bind events, so how exactly does it bind? Here’s an example:

new Vue({ directives:{ on2:{ inserted(el,info){ el.addEventListener(info.arg, info.value) }, unbind(el, Info){el.removeEventListener(info.arg, info.value)}}, template: '<button v-on2:click="hi"> { hi() { console.log("hi"); } } }).$mount("#app");Copy the code

This is a simplified version of v-ON events

Function of instruction
  • For DOM manipulation: The main purpose of the Vue directive is native DOM manipulation; Vue instances/components are used for data binding, event listening, and DOM updates
  • Reduce duplication

Mixins – with

If we say directives are for reducing DOM duplication, mixins are for reducing data methods and hooks duplication. For example, if we need to add name and time on each component, create and destroyed will prompt and report the lifetime of each component. There are five components. If the usual method is too tedious, then mixins will be much more convenient. How do you do it? You can look at this. In the demonstration code, only one mixins function is used, which makes the tedious and repetitive things much simpler. In fact, mixins also have some tricks, such as option smart merge and we can use a global mixin. In the example above, we can declare a vue. mixin(global mixin) globally, but this method is not recommended, it is prone to the problem of too much scope.

Extends from

Speaking of extends, it’s similar to mixins. Let’s enumerates a requirement that’s the same as mixins, but I don’t want to write mixins on every component. What do I do? We can use vue.extend or options.extends. We create a new myvue.js file:

import Vue from "vue"; const MyVue = Vue.extend({ data() { return { name: undefined, time: undefined }; }, created() { if (! this.name) { throw new Error("need name"); } this.time = new Date(); Console. log(' ${this.name} was born '); }, beforeDestroy() { const now = new Date(); Console. log(' ${this.name} dead, live ${now-this. time} ms'); }}); export default MyVue;Copy the code

Then take the child1. vue file above as an example and introduce the inheritance file in it:This is extends, and mixins in general don’t have much of an alternative, so you can try it out. Generally speaking, extends is a more abstract encapsulation than mixins.

Provide and Inject – Provide and Inject

We use a skin function as an example, in general, this is called immortal plant trees (provide), inject or above skin function code:

  provide(){
    return{
      themeName:this.themeName,
      changeTheme:this.changeTheme,
      changeFontSize:this.changeFontSize
    };
  },
Copy the code

When we want to share a wide range of data and methods, we put them in the provide. Note that in this code, there is no response if we change themeName directly, because the value of themeName is copied into the provide. This can be solved by reference. But this is not recommended.

conclusion

Directives and instructions

  • With the globalVue.directive('x',{... })
  • Local useoptions.directives
  • The function is to reduce duplicate code associated with DOM operations

Mixins – with

  • With the globalVue.mixin({... })
  • Local useoptions.mixins:[mixin1,mixin2]
  • The effect is to reduce duplication in options

Extends – Inheritance/extension

  • With the globalVue.extend({... })
  • Local useoptions.extends:{... }
  • It works much like mixins, but in a different form

Provide /inject – Provide and inject

  • Ancestors provide the east, descendants inject the things
  • The function is to share information across a wide range of N generations