Vue-5 advanced construction properties

This chapter introduces: directive, mixin, extend, Provide&inject these five Vue advanced construction attributes.

Directive – instruction

  • What is a directive?

    In fact, we have already learned the instructions before, such as v-if and V-for. Those that start with V – are instructions, and v-if and V-for are built-in instructions. In addition, we can also customize the instructions.

  • Global custom instruction

    Global custom directive: a custom directive in a global scope can also be used globally, that is, any component can use the global directive. To declare multiple global directives, call vue. directive multiple times

    Directive ('x',directiveOptions) {// Use the global directive. You can use v-x <myComponent v-x ></myComponent> in any component.Copy the code

  • Local custom instructions

    Local custom directive: a declaration under a component Vue object that can only be used in an instance of that component. Note the directives when declared locally.

    <script> export default {... directives:{ "x":directiveOptions, "Y ":directiveOptions}} </script> // Can only use local directives in this component <template> <div v-x v-y></div> </template>Copy the code

  • directiveOptions

    In the above declaration, we only demonstrated the declaration of the directive. We did not explore how to give the directive functionality, which is implemented through the 5 hook functions in directiveOptions.

    1. The five hook functions in directiveOptions:
      1. Bind: can be thought of as a created function in Vue, i.e. a hook function that executes when a VNode (virtual DOM) using this directive is loaded into memory.
      2. Inserted: Called when the bound element is inserted into the parent node.
      3. Update: called when the component’s VNode is updated, but may occur before its child VNodes are updated.
      4. ComponentUpdated: Invoked when the VNode of the component where the directive resides and its child VNodes are all updated.
      5. Unbind: Called only once, when an instruction is unbound from an element.
    2. Hook function is passed four parameters: (el, binding, vnode, oldVnode)
      1. The first argument, el:, is the element bound by the directive and can be used to manipulate the DOM directly.
      2. The second argument binding: this is an object containing the following properties
        • Name: indicates the command namev-The prefix
        • Value: the binding value of an instruction, such as:v-on:click='sayhi'The sayhi is the instruction binding value.
        • OldValue: The value preceding the instruction binding, only inupdate 和 componentUpdatedHooks are available. Available regardless of whether the value changes.
        • Expression: an instruction expression in the form of a string, for example:v-on:click='sayhi'Here,'sayhi'It’s an instruction expression.
        • Arg: A parameter passed to an instruction, such as:v-on:click='sayhi'theclickIs the argument passed to the instruction.
        • Modifiers: An object that contains modifiers. Such as:v-my-directive.foo.bar, the modifier object is{ foo: true, bar: true }.
      3. The third parameter vnode: the virtual node generated by Vue compilation.
      4. The fourth parameter oldVnode: the last virtual node generated by Vue compilation.

  • Declare a directive completely using directiveOptions

    Below we pass a small example, to simply realize Vue built-in instruction V-ON binding event function.

    new Vue({
    directives: {
        "myOn": {
            inserted: (el, info) = > {
                el.addEventListener(info.arg, info.value)
            }
        }
    }
})
Copy the code

  • The functions and usage scenarios of directives

    Vue components/instances are mainly used for data binding, event listening, AND DOM updates, while directives are mainly used to perform native DOM operations.

    When we need to repeat the same native DOM operation several times, or perform some more complex native DOM operations, we can use instructions to do this.

Combination of mixins –

  • What are mixins?

    Simply put, “copy.” Sometimes we need to use the same component multiple times, and the code of these components is almost the same. To save code, we can extract the same parts and combine them into their own components through mixins. Mixins operations are merged into other Vue instances and run as a whole: for example, mixins do not have a variable, but other Vue instances do. In this case, no errors are reported because the mixins are merged before running.

  • The significance of mixins

    Mixins reduce the reuse of data, methods, and hooks.

  • The use of mixins

    // Extract log.js for the same part
export default {
    data(){
        return {
            a:'a'}},methods: {hw:function(){ console.log('helloWorld')}},created:function(){
    	console.log('created')}}Copy the code
    // Use the extracted part myComponent.vue in the component
import log from './log.js'
export default {
    // This is an array, indicating that multiple mixins can be usedMixins: (log), data () {return {
    		b:'b'}}}// At this point, the component can use mixins' A data, HW methods, created, and its own B data
Copy the code

  • Mixins are intelligently merged

    The same data instance takes precedence, and the same hook function merges both operations.

  • Global mixin

    Vue. Mixin (} {mixin object)Copy the code

    Note: Global mixins are declared without s(mixins). After using a global mixin, all components including app.vue will merge the global mixin by default, so it is not recommended to use a global mixin.

Extends from

  • The role of the road,

    Extends acts like mixins, but in a different form.

  • Extends the use of

    1. Use of local extends

    // Declare the extension
const myVue = {}
/ / use
export default {
    // Note that this is not an array
    extends:myVue,
    data(){ return{}}}Copy the code

    1. Use of global extends

      // Global declaration
constMyVue = vue.extend ({extend content})// Declare an inherited Vue instance
new myVue({vueOptions}) 
Copy the code

    2. Extends and extends&mixins

      Extends of extends declaration can also use extends and mixins.

      import log from './log.js' // mixin
const com1 = {}

const com2 = {
    extends:com1,
    mixins:[log]
}
Copy the code

Provide provide & Inject

  • What are provide and inject?

    Upper-layer components can transmit data and method through provide, while lower-layer components can obtain data and method transmitted by upper-layer components through Inject.

    Provide and Inject deliver data and methods in a wide range

  • Provide and inject

    // Parent component
export default {
    data(){
        return { n:'n'}},methods:{
        add(){
            console.log('add')
        }  
    },
    provide(){
        return {
            n:this.n,
            add:this.add
        }
    }
}

// Child components
// We can use n and add in the lower component
export default {
    inject: ['n'.'add']}Copy the code

  • Provide and inject usage details

    When passing data, the parent component copies the address of its own data and passes it. The child component can obtain the value of data, but it is not allowed to modify some data (simple types such as Number and String) of the parent component in the child component, because we only modify the value of the copied variable. However, we can modify the parent component’s data by calling the method passed by the parent component in the child, because the method passed by is associated with the parent component’s data.

    However, if the data provided by the parent component is an object, and the parent component copies the same address, the child component accesses the same object, then the child component can modify the object and affect the parent component. Passing a provide object is not recommended, because if you use both, it will be difficult to determine what state that object is currently in when there are many components.