Vue高级特性 Mixin 混入文件

原创

wx66457196d1dd2 2024-05-16 10:41:55 ©著作权

文章标签 钩子函数 API 变量名 Mixin混入 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者wx66457196d1dd2的原创作品，请联系作者获取转载授权，否则将追究法律责任

要点

mixin的结构跟vue文件的js部分一样 export default { }
多个组件有相同的逻辑，抽离出来
mixin并不是完美的解决方案，会有一些问题 Vue3 提出Composition API 旨在解决这些问题

缺点

变量来源不明确，不利于阅读（编程中的大忌，我们希望我们的变量都是可查找的）
多mixin可能带来命名冲突（变量名相同会互相覆盖）两者之间出现重名
mixin的组件可能会出现多对多的关系复杂度较高

（官方） 不清晰的数据来源：当使用了多个 mixin 时，实例上的数据属性来自哪个 mixin 变得不清晰，这使追溯实现和理解组件行为变得困难。这也是我们推荐在组合式函数中使用 ref + 解构模式的理由：让属性的来源在消费组件时一目了然。

命名空间冲突：多个来自不同作者的 mixin 可能会注册相同的属性名，造成命名冲突。若使用组合式函数，你可以通过在解构变量时对变量进行重命名来避免相同的键名。

隐式的跨 mixin 交流：多个 mixin 需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入，像普通函数那样。

Vue3 提出的Composition API 旨在解决这些问题

相关的面试技巧 可以不太深，但必须知道熟悉基本用法，了解使用场景最好能和自己的项目经验结合起来

代码

<template>
    <div>
        <p>{{name}} {{position}} {{number}}</p>
        <button @click="showInfo">显示姓名</button>
    </div>
</template>

<script>
import myMixin from "./mixin.js"
export default {
    mixins:[myMixin],// 可以添加多个，会自动合并起来
    data() {
        return {
            name:"Tiger"
        }
    },
    methods: {
    },
    mounted() {
        // eslint-disable-next-line
        console.log('component mounted', this.name);
    }
}
</script>

混入文件

export default {
    data(){
        return{
            position:"PG",
            number:13
        }
    },
    methods:{
        showInfo(){
            console.log(this.name);
        }
    },
    mounted(){
        console.log("Name from mixin", this.name);
    }
}

效果图

源文件中只有name 属性。 position和number属性都在混入文件中。

Vue高级特性 Mixin 混入文件_Mixin混入