关于javascript:Vue3的mixin

小编在之前的我的项目中还没有接触过 minxin(数据混入)，直到一次面试的时候，面试官问我，我才留神到，原来还有这样的一个货色，明天小编就和大家一起看看这个神奇的 mixin。个人感觉 mixin 和组件的注册和应用很相似，咱们要注册一个部分的 mixin 的时候，能够这样

// 组件 data 和 methods 优先级高于 mixin 中的 data 优先级，组件和 mixin 数据同时存在的时候，应用组件中的 data 数据，如果组件外部没有 data，应用 mixin 中的数据
// 申明周期函数，先执行 mixin 外面的，再执行组件外面的生命周期函数
const myMinxin = {data(){
        return {num: 2}
    },
    created(){console.log('mixin created')
    },
    methods:{handleClick(){console.log('mixin handleClick')
        }
    }
}


const app = Vue.createApp({data(){
        return {num: 1}
    },
    mixins:[myMinxin],
    methods:{handleClick(){console.log('handleClick')
        }
    },
    created(){console.log('created')
    },
    template:`<div>{{num}}</div>
            <button @click="handleClick"> 点击 </button>`
})

const vm = app.mount('#root')

之所以叫下面的组件为部分组件，是因为只能在哪个组件内注册，在哪个组件外部应用，在有子组件的时候，并不能获取到数据混入的数据，就像这样

const myMinxin = {data(){
        return {
            num: 2,
            count:66
        }
    },
    created(){console.log('mixin created')
    },
    methods:{handleClick(){console.log('mixin handleClick')
        }
    }
}


const app = Vue.createApp({data(){
        return {num: 1}
    },
    mixins:[myMinxin],
    methods:{handleClick(){console.log('handleClick')
        }
    },
    created(){console.log('created')
    },
    template:`<div>{{num}}</div>
            <child />
            <button @click="handleClick"> 点击 </button>`
})

app.component('child',{template:`<div>{{ count}}</div>` // 这个时候，就获取不到了，因为是在组件外部定义的，能够了解成部分的 mixin。如果想用的话，须要在子组件中，也用一个 mixin
})

const vm = app.mount('#root')

相似组件，那咱们想全局注册一个 mixin，要怎么写呢？

const app = Vue.createApp({data(){
        return {num: 1}
    },
    methods:{handleClick(){console.log('handleClick')
        }
    },
    created(){console.log('created')
    },
    template:`<div>{{num}}</div>
            <child />
            <button @click="handleClick"> 点击 </button>`
})

app.component('child',{template:`<div>{{ count}}</div>`
})
// 通过 app.mixin 注册全局 mixin
app.mixin({data(){
        return {
            num: 2,
            count:66
        }
    },
    created(){console.log('mixin created')
    },
    methods:{handleClick(){console.log('mixin handleClick')
        }
    }
})

const vm = app.mount('#root')

从下面的几个例子，咱们晓得，不论是全局 mixin 还是部分 mixin，如果组件和 mixin 中同时存在雷同的数据，组件内的数据优先级总是高于 mixin 中的数据，那么有没有什么方法，让 mixin 内的数据优先级高于组件内呢，答案是必定的，咱们能够批改 Vue 的配置，就像这样

const myMinxin = {num: 2,}
const app = Vue.createApp({
    num: 1,
    mixins:[myMinxin],
    methods:{handleClick(){console.log('handleClick')
        }
    },
    created(){console.log('created')
    },
    template:`<div>{{this.$options.num}}</div> // this.$options.num
            <button @click="handleClick"> 点击 </button>`
})

// 批改 num 中的数据混入和 data 中的策略
app.config.optionMergeStrategies.num = (mixinVal,appValue) => {return mixinVal || appValue}

const vm = app.mount('#root')

大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈。