This is the 16th day of my participation in the August Text Challenge.More challenges in August

In this article we will discuss the use of APImixin, mount and unmount applications, and what we need to pay attention to.

mixin

Mixin, officially, provides a very flexible way to distribute reusable functionality in Vue components. A mixin object can contain any component option. When a component uses a mixin object, the options for all mixin objects are “blended” into the options for the component itself. It is worth noting, however, that mixins are not recommended for use in application code, except in special circumstances.

How to use

We can use it globally or we can use it locally.

Local use

// mix functions
const myMixin = {
  methods: {
    hello() {
      console.log('hello from mixin! ')}}}/ / use
const app = Vue.createApp({
  mixins: [myMixin]
})
Copy the code

This allows us to use the Hello function in our instance. Remember that mixins are arrays, and you can use multiple mixins.

The global

app.mixin({
  methods: {
    hello() {
      console.log('Global use! ')}}})Copy the code

It’s worth noting that once a global mixin is used, it affects every component created later.

Option to merge

Components and mixin objects are merged when they have options of the same name. When they merge, the Mixin’s Created hook executes first, and the data and methods are overwritten by the component. As follows:

Custom mixin

const myMixin = {
    setup() {
        const title = ref("Hi, world!")

        function conflicting() {
            console.log('from mixin')}return {
            title,
            conflicting
        }
    },
    created() {
        console.log('Mixin object's hook is called')}}Copy the code

mixins

const app = createApp({
    setup() {
        const title = ref("Hello, world!")

        function conflicting() {
            console.log('from self')}return {
            title,
            conflicting
        }
    },
    mixins: [myMixin],
    created() {
        console.log('Component hook called')}})Copy the code

The final execution result is:

  1. Print the result: The mixin object hook is called first, then the component hook is called.

  2. The value for using title is: Hello, world! .

  3. The result of calling Conflicting is: From self.

mount

The innerHTML of the supplied DOM element is replaced with the template rendering result applied to the root component. If we want to mount an app instance to a DOM element with id=”#app”, we can do this:

app.mount("#app")
Copy the code

Here’s a caveat: Vue2 replaces the DOM directly, whereas Vue3 replaces only the innerHTML in the DOM. I don’t know if you noticed the changes to the app. vue file when building a project with vue-CLI.

Vue2

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
Copy the code

Vue3

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
Copy the code

We can see that there is a layer of div#appdom missing in Vue3 because the mount method has changed.

unmount

Uninstall the root component of the application instance. In contrast to mount, we can see that unmount is the method of unmounting the application instance, as follows:

app.unmount()
Copy the code

conclusion

  1. If we build our own project, we need to consider mounting, unmounting, and mounting changes at Vue3; If you’re building a project with VUe-CLI, you generally don’t need to worry about these issues.

  2. Mixins should be used with caution, especially globally. We can now use setup functions to handle variables, methods, and so on related to unified logic.

For more articles, the portal has opened: Look back at the Vue3 catalogue!