vue的mixin简化开发

Posted 2022-02-08 mengff

vue的mixin可以将多个组件公用的声明周期方法和数据封装成一个对象，在不同的组件中自由插拔。实际做项目的时候，可以定义一些mixin，供多个组件使用。也非常有必要定义一个全局的mixin对象，对所有组件的公共行为进行抽象。

可以使用Vue.mixin来定义全局的mixin，推荐。

也可以定义一个带mixin的对象，所有地方使用它来初始化。例如：

定义

// 定义一个混入对象
const myMixin = 
    data() 
        return 
            version: ‘1.0.0‘,
            isApp: isApp()
        
    ,
    created: function () 

    ,
    mounted() 
        this.init();
        if (commonSwitch.manualLoading) 
            this.closeLoading();
        
    ,
    methods: 
        init() 
            FastClick.attach(document.body);
        ,
        closeLoading() 
            const loading = document.querySelector(‘.page-loading‘);
            if (loading) 
                loading.style.display = ‘none‘;
            
        
    ,
    components: 
        layout: Layout
    


// 定义一个使用混入对象的组件
export const MyVue = Vue.extend(
    mixins: [myMixin]
)

使用

import  MyVue  from ‘@/assets/js/common/myVue‘;

new MyVue(
    el: ‘#my_container‘,
    data: 
        bannerImgStyle:,
        moving: false
    ,
    methods:
        ...
    
    ...

用mixin来简化Vue组件的公共行为，是一个不错的选择。