Vue3.x 高阶 —— Mixins混入使用

灵魂学者

951人浏览 · 2025-12-02 14:54:44

灵魂学者 · 2025-12-02 14:54:44 发布

在 Vue 的相关专栏中讲过了关于Mixins的混入使用，使用的是Vue2.x版本，这里也附上先前讲解的 Vue2.x Mixins 混入使用的篇目供参考 —— Vue2.x - Mixins混入使用篇目

回顾 Vue2.x Mixins 混入

关于Mixins混入使用的目的像为了功能的复用等这些就不再详解。下面先用简单的案例来回顾在 Vue2.x 中Mixins混入的使用：

<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

<body>
    <!-- Vue2.x - Mixins -->
    <div id="app">
        <h3>{{msg}}</h3>
        <button @click="sayHello">打招呼</button>

        <p>---------------分割-----------------</p>

        <h3>{{count}}</h3>
        <button @click="outPut">输出</button>

    </div>

    <script>
        // Mixins混入
        
        const mixinsObj = {
            data: {
                count: 8
            },
            methods:{
                outPut(){
                    alert("输出成功")
                }
            }
        }

        new Vue({
            el:'#app',
            mixins:[mixinsObj],
            data:{
                msg: "消息"
            },
            methods:{
                sayHello(){
                    alert("Hello");
                }
            }
        })
    </script>
</body>
</html>

使用 mixins:[ mixinsObj ] 将mixinsObj这个对象进行混入即可，是不是很好懂。

Mixins中的就近原则，即在实例中的data和method之类的选项优先高于mixins中所定义的，下面来看一下例子：

<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

<body>
    <!-- Vue2.x - Mixins -->
    <div id="app">
        <h3>{{msg}}</h3>
        <button @click="sayHello">打招呼</button>
    </div>

    <script>
        // Mixins混入
        
        const mixinsObj = {
            data:{
                msg: "无消息"
            },
            methods:{
                sayHello(){
                    alert("Hi");
                }
            }
        }

        new Vue({
            el:'#app',
            mixins:[mixinsObj],
            data:{
                msg: "消息"
            },
            methods:{
                sayHello(){
                    alert("Hello");
                }
            }
        })
    </script>
</body>
</html>

可以看到运行结果，混入的mixinsObj对象中的data和methods的内容冲突，即data中的msg和methods中的sayHello方法，运行的结果则是显示实例中定义的而非Mixins所混入的。

以上是关于 Vue2.x - Mixins 混入使用的简单回顾，下面来看一下 Vue3.x - Mixins的混入。

Vue3.x - Mixins 混入使用

<script src="https://unpkg.com/vue@next"></script>

<body>
    <div id="app"></div>

    <script>
        // mixins
        const mixinsObj = {
            data(){
                return{
                    count: 8
                }
            },
            methods:{
                outPut(){
                    alert("输出成功")
                }
            }
        }

        const app = Vue.createApp({
            mixins: [mixinsObj],
            data(){
                return{
                    msg: "消息"
                }
            },
            methods:{
                sayHello(){
                    alert("Hello");
                }
            },
            template:`
            <div>
                <h3>{{msg}}</h3>
                <button @click="sayHello">打招呼</button>

                <h3>{{count}}</h3>
                <button @click="outPut">输出</button>
            </div>`
        })

        app.mount('#app')
    
    </script>

</body>

在 Vue3.x 中使用Mixins混入也是同样使用mixins:[ mixinsObj ]将mixinsObj这个对象进行混入，演示效果如下：

Vue2.x 和 Vue3.x 同理都是有这个就近原则，Mixins混入的对象优先级别没有当前实例内定义的优先级别高，下面来用一段代码和演示效果展示：

<script src="https://unpkg.com/vue@next"></script>

<body>
    <div id="app"></div>
    <script>
        const mixinsObj = {
            data(){
                return{
                    msg: "无消息"
                }
            },
            methods:{
                sayHello(){
                    alert("Hi")
                }
            }
        }

        const app = Vue.createApp({
            mixins:[ mixinsObj ],
            data(){
                return{
                    msg: "消息"
                }
            },
            methods:{
                sayHello(){
                    alert("Hello")
                }
            },    
            template:`
            <div>
                <h3>{{msg}}</h3>
                <button @click="sayHello">打招呼</button>
            </div>`
        })

        app.mount('#app')
    </script>
</body>
</html>

可以看到这个效果演示输入的是app这个实例中定义的，而非Mixins混入定义的。

Mixins混入到实例当中我们知道了有就近原则，即定义的data属性当中的内容在实例当中我们可以mastache语法直接用，在上述的例子当中可以看到，如果我所定义的是自定义的属性呢？是否也能够用mastache生效，如果并不能，怎么才能拿到这些自定义的属性呢？

Mixins 自定义属性

<script src="https://unpkg.com/vue@next"></script>

<body>
    <div id="app"></div>

    <script>
        // Mixins - Vue3.x

        const mixinsObj = {
            myName: 'LHXZ', // 自定义属性
            data() {
                return {
                    NiceName: 'LHXZ'
                }
            },
        }

        const app = Vue.createApp({
            mixins:[mixinsObj],
            template:`
            <div>
                myname: {{myName}}    
                <br/>
                NiceName: {{NiceName}}
            </div>`
        });

       app.mount('#app');
    </script>
</body>
</html>

控制台上有对应的警告信息提示并没有这个myName属性，而NiceName在mastache语法下可以获取，NiceName属性是在Mixins中定义在data属性中的，而myName则不是，那么如何才能拿到这个myName的值呢？

在app实例上混入了Mixins这样的一个对象，那么这个自定义属性也是绑定在实例上面的，那么它最终会挂载到 $options 上面来，官方文档参考

下面我们有个钩子函数把它打印一下，这里用比较熟悉 Mounted() 生命周期打印结果，Vue3.x生命周期后续另说。

...
const app = Vue.createApp({
    mixins:[mixinsObj],
    mounted(){
        console.log(this.$options)
        console.log(this.$options.myName)
    },
    ....

可以通过 $options 可以获取到，那么如果不在Mixins中来去定义这个自定义属性，而是在实例当中定义在data属性外，那么结果又将如何呢？下面来看一下代码和演示效果：

<script src="https://unpkg.com/vue@next"></script>

<body>
    <div id="app"></div>

    <script>
        // Mixins - Vue3.x
        const mixinsObj = {
            myName: 'LHXZ', // 自定义属性
            data() {
                return {
                    NiceName: 'LHXZ'
                }
            },
        }

        const app = Vue.createApp({
            mixins:[mixinsObj],
            mounted(){
                console.log(this.$options)
                console.log(this.$options.myName)
            },
            myName: 'aa',
            template:`
            <div>
                myname: {{myName}}    
                <br/>
                NiceName: {{NiceName}}
                <br/>
                myname: {{this.$options.myName}}
            </div>`
        })
        app.mount('#app');
    </script>
</body>
</html>

this.$options.myName 打印的应该时Mixins混入对象中的自定义属性myName的值，但由于在app实例上有myName自定义属性，它的优先级高于Mixins，所以打印的是 "aa"

Vue3.x中Mixins混入依然遵循这个就近原则，那么如果要让这个Mixins混入对象的内容优先级别高要如何设置，虽然这种情况还是很少见的，下面来讲一下配置Mixins的优先级；

配置优先 Vue3.x - Mixins

通过 vue.config.optionMergeStrategies 进行配置：

<script src="https://unpkg.com/vue@next"></script>

<body>
    <div id="app"></div>

    <script>
        // Mixins - Vue3.x
        const mixinsObj = {
            myName: 'LHXZ', // 自定义属性
            data() {
                return {
                    NiceName: 'LHXZ'
                }
            },
        }

        const app = Vue.createApp({
            mixins:[mixinsObj],
            mounted(){
                console.log(this.$options)
                console.log(this.$options.myName)
            },
            myName: 'aa',
            template:`
            <div>
                myname: {{myName}}    
                <br/>
                NiceName: {{NiceName}}
                <br/>
                myname: {{this.$options.myName}}
            </div>`
        })
        
        // 配置
        app.config.optionMergeStrategies.myName = (mixinVal, appVal)=>{
            return mixinVal || appVal
        }        

        app.mount('#app');
    </script>
</body>
</html>

看一下测试效果：

// mixin优先
app.config.optionMergeStrategies.myName = (mixinVal, appVal)=>{
    return mixinVal || appVal
}

// app优先
app.config.optionMergeStrategies.myName = (mixinVal, appVal)=>{
    return  appVal || mixinVal
}

以上就是本篇关于Vue高阶中的Mixins混入使用的内容了，感谢大家的三连支持！！！