Vue3混入

文章目录

  • Vue3混入
    • [1. 概念](#1. 概念)
    • [2. 选项合并](#2. 选项合并)
    • [3. 全局合并](#3. 全局合并)

Vue3混入

1. 概念

混入 (mixins)定义了一部分可复用的方法或者计算属性

混入对象可以包含任意组件选项

当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项

  • 实例

    html 复制代码
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 混入实例</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    <!--创建一个id为app class为demo的div-->
    <div id="app"></div>
    
    <script type="text/javascript">
    //    定义混入对象
        const myMinxin = {
            created() {
                // 调用hello方法
                this.hello()
            },
            methods: {
                // 定义hello方法
                hello() {
                    document.write('欢迎来到混入实例')
                }
            }
        }
    
        // 定义HelloVueApp应用 使用混入实例
        const app = Vue.createApp({
            mixins: [myMinxin]
        })
    
        app.mount('#app')
    </script>
    </body>
    </html>

    页面效果:

2. 选项合并

当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。

比如,数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先

同名钩子函数将合并为一个数组,因此都将被调用。另外,mixin 对象的钩子将在组件自身钩子之前调用。

值为对象的选项 ,例如 methods、components 和 directives,将被合并为同一个对象 。两个对象键名冲突时,取组件对象的键值对

  • 以下实例中,Vue 实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。

    html 复制代码
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 选项合并 Vue 实例与混入对象包含了相同的方法</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    <!--创建一个id为app class为demo的div-->
    <div id="app"></div>
    
    <script type="text/javascript">
    //    定义混入对象
        const myMixin = {
            data() {
                return {
                    message: 'hello',
                    foo: 'runoob'
                }
            }
        }
    
        // 创建HelloVueApp应用 使用混入实例
        const app = Vue.createApp({
        //     使用混入实例
            mixins: [myMixin],
        //     混入对象数据和app应用数据重名
            data() {
                return {
                    message: 'boodbye',
                    bar: 'def'
                }
            },
            created() {
                document.write(JSON.stringify(this.$data))
            }
        })
    
    
        app.mount('#app')
    </script>
    </body>
    </html>

    页面效果:

  • 同名钩子函数将合并为一个数组,因此都将被调用 。另外,mixin 对象的钩子将在组件自身钩子之前调用。

    html 复制代码
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 同名钩子函数将被合并为数组</title>
        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    </head>
    <body>
    <!--创建一个id为app class为demo的div-->
    <div id="app"></div>
    
    <script type="text/javascript">
    //    定义混入对象
        const myMixin = {
            created() {
                console.log('myMixin对象的钩子被调用')
            }
        }
    
        // 创建HelloVueApp应用 使用混入实例
        const app = Vue.createApp({
        //     使用混入实例myMixin
            mixins: [myMixin],
        //     混入对象数据和app应用数据重名
            created() {
                console.log('组件钩子被调用')
            }
        })
    
    
        app.mount('#app')
    
    
    // => "mixin 对象的钩子被调用"
    // => "组件钩子被调用"
    </script>
    </body>
    </html>
  • 值为对象的选项 ,例如 methods、components 和 directives,将被合并为同一个对象 。两个对象键名冲突时,取组件对象的键值对

    html 复制代码
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 值为对象的选项,例如 methods、components 和 directives,
            将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。</title>
        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    </head>
    <body>
    <!--创建一个id为app class为demo的div-->
    <div id="app"></div>
    
    <script type="text/javascript">
    //    定义混入对象
        const myMixin = {
            methods: {
                foo() {
                    console.log('foo')
                },
                conflicting() {
                    console.log('from mixin')
                }
            }
        }
    
        // 创建HelloVueApp应用 使用混入实例
        const app = Vue.createApp({
        //     使用混入实例myMixin
            mixins: [myMixin],
            methods:{
                bar() {
                    console.log('bar')
                },
                conflicting(){
                    console.log('from self')
                }
            }
        })
    
    
        var vm = app.mount(`#app`)
        vm.foo() // foo
        vm.bar()  // bar
        vm.conflicting() // from self
    
    
    // => "mixin 对象的钩子被调用"
    // => "组件钩子被调用"
    </script>
    </body>
    </html>

    调用了三个方法:vm.foo()、vm.bar()、vm.conflicting()。从输出结果 methods 选项中如果碰到相同的函数名则 Vue 实例有更高的优先级会执行输出。

3. 全局合并

也可以全局注册混入对象 。注意使用! 一旦使用全局混入对象,将会影响到 所有 之后创建的 Vue 实例。使用恰当时,可以为自定义对象注入处理逻辑。

  • 谨慎使用全局混入对象,因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

    html 复制代码
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 全局混入</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    <!--创建一个id为app class为demo的div-->
    <div id="app"></div>
    
    <script type="text/javascript">
        // 创建HelloVueApp应用 使用混入实例
        const app = Vue.createApp({
        //     自定义选项myOption
            myOption: 'hello'
        })
    
        // 为自定义选项myOption注入一个处理器
        app.mixin({
            created() {
                const myOption = this.$options.myOption
                if (myOption) {
                    document.write(myOption)
                }
            }
        })
    
    
        app.mount(`#app`)
    
    
    // => "mixin 对象的钩子被调用"
    // => "组件钩子被调用"
    </script>
    </body>
    </html>
相关推荐
用户516816614584116 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦16 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He16 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化