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:
-
Print the result: The mixin object hook is called first, then the component hook is called.
-
The value for using title is: Hello, world! .
-
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
-
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.
-
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!