Detailed usage tutorial of Mixin&extends in Vue

Meet Mixins

At present, we use a componentized development method to develop applications, but there are some common code logics between different components, and we hope to extract the same code logic at this time.

Mixin is supported in both vue2 and vue3. Mixin provides a very flexible way to distribute reusable functions in Vue components. A Mixin object can contain any component options. When a component uses a Mixin object, all The options of the Mixin object will be mixed into the options of the component itself.

Officially defined Mixin

Mixins provide a very flexible way to distribute reusable functionality in Vue components. A mixin object can contain arbitrary component options. When a component uses a mixin object, all the mixin object's options will be "mixed" into the component's own options.

How to use Mixin in the project

Create a mixins folder under the src folder

Under the demomixins.js file

export default {
    data() {
        return {
            msg:'mixins 中的data'
        }
    },
    mounted() {
        console.log('mixins 中的mounted');
    },
    methods:{
        foo() {
            console.log('mixins 中的methods');
        }
    },
    computed:{
        message() {
            return 'mixin 中的computed'
        }
    }
}

Under the Home.vue file

<template>
    <div class='home'>
        { {msg}}<br>
        { {message}}<br>
        <button @click="foo">点击按钮</button>
    </div>
</template>

<script>
// 导入js文件
import demomixins from '@/mixins/demomixins.js'
export default {
    name:'Home',
    data() {
        return {
        };
    },
    mixins:[demomixins],    // 混入demomixins对象
    mounted() {
    },
    methods: {},
    components:{},
};
</script>

Although we have not defined the msg variable, the message calculation property, and the foo method in home.vue, they can be displayed on the page.

Mixin Merging Rules

If the options in the Mixin object conflict with the options in the component object, how will Vue operate?

<template>
    <div class='home'>
        { {msg}}<br>
        { {message}}<br>
        <button @click="foo">点击按钮</button>
    </div>
</template>

<script>
// 导入
import demomixins from '@/mixins/demomixins.js'
export default {
    name:'Home',
    data() {
        return {
            msg:'home 中的data'
        };
    },
    mixins:[demomixins],
    mounted() {
        console.log('home 中的mounted');
    },
    methods:{
        foo() {
            console.log('home 中的methods');
        }
    },
    computed:{
        message() {
            return 'home 中的computed'
        }
    }
};
</script>

Above we can see that:

The msg attribute in the mixed-in object conflicts with the msg attribute of the component, and the value of the component takes precedence. Attributes that are not in the component will take effect when mixed into the object.

The hook functions with the same name will be merged into an array and will be called, and the mixed-in function will be called first

Options whose values ​​are objects, such as methods, computed, etc., will be merged into a new object. If the key name conflicts, the value of the component will take precedence

Global Mixin

If some options in the component are required by all components, then we can use the global mixin at this time. Once registered, the global mixin options will affect every component

const app = createApp(App)
app.mixin({
    data() {
        return {
            msg:'global 中的data'
        }
    },
})

The official definition extends

Allows a component to extend to another component and inherit options from that component.

extends类似于mixin,相当于继承,但是只是继承options Api中的内容，不继承template模板。

项目中使用extends

在components创建一个组件my.vue

<script>
export default {
    data() {
        return {
            msg:'uu盘'
        };
    }
};
</script>

在Home.vue文件下

<template>
    <div class='home'>
        { {msg}}
    </div>
</template>

<script>
// 导入
import my from '@/components/my'
export default {
    name:'Home',
    extends:my,
    data() {
        return {

        };
    },
};
</script>

在开发中extends用的非常少，在Vue2中比较推荐大家使用Mixin，而在Vue3中推荐使用Composition API。