Vue3混入

文章目录

  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并

Vue3混入

1. 概念

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

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

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

  • 实例

    DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 混入实例title>
        <script src="https://unpkg.com/vue@next">script>
    head>
    <body>
    
    <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>
    

    页面效果:
    Vue3混入_第1张图片
    Vue3混入_第2张图片

2. 选项合并

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

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

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

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

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

    DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 选项合并 Vue 实例与混入对象包含了相同的方法title>
        <script src="https://unpkg.com/vue@next">script>
    head>
    <body>
    
    <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>
    

    页面效果:
    Vue3混入_第3张图片
    Vue3混入_第4张图片

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

    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>
    
    <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,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对

    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>
    
    <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 实例 (包括第三方模板)。

    DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 全局混入title>
        <script src="https://unpkg.com/vue@next">script>
    head>
    <body>
    
    <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>
    

Vue3混入_第5张图片

你可能感兴趣的:(vue.js)