【 Vue 2 中的 Mixins 模式】

Vue 2 中的 Mixins 模式

在 Vue 2 里,mixins 是一种灵活的复用代码的方式,它能让你在多个组件间共享代码。借助 mixins,你可以把一些通用的选项(像 datamethodscomputed 等)封装到一个对象里,然后在多个组件中使用。

下面是 mixins 的基本使用示例:

javascript 复制代码
// 定义一个 mixin
const myMixin = {
    data() {
        return {
            mixinData: '这是 mixin 中的数据'
        }
    },
    methods: {
        mixinMethod() {
            console.log('这是 mixin 中的方法');
        }
    }
};

// 定义一个组件并使用 mixin
const MyComponent = {
    mixins: [myMixin],
    data() {
        return {
            componentData: '这是组件中的数据'
        }
    },
    methods: {
        componentMethod() {
            console.log('这是组件中的方法');
        }
    }
};

在这个例子中,MyComponent 组件使用了 myMixin,这意味着 MyComponent 能够访问 myMixin 里定义的 datamethods

选项合并规则

当组件使用 mixins 时,若组件和 mixin 存在同名选项,就需要依据一定规则进行合并:

数据对象(data

如果组件和 mixin 都定义了 data 选项,它们会递归合并。当出现键名冲突时,组件的数据会覆盖 mixin 的数据。

javascript 复制代码
const myMixin = {
    data() {
        return {
            message: 'mixin 消息'
        }
    }
};

const MyComponent = {
    mixins: [myMixin],
    data() {
        return {
            message: '组件消息'
        }
    }
};

// 创建组件实例
const vm = new Vue(MyComponent);
console.log(vm.message); // 输出: 组件消息

钩子函数

如果组件和 mixin 都定义了相同的钩子函数(如 createdmounted 等),这些钩子函数会被合并成一个数组,并且都会被调用。mixin 的钩子函数会先于组件的钩子函数执行。

javascript 复制代码
const myMixin = {
    created() {
        console.log('mixin 的 created 钩子');
    }
};

const MyComponent = {
    mixins: [myMixin],
    created() {
        console.log('组件的 created 钩子');
    }
};

// 创建组件实例
const vm = new Vue(MyComponent);
// 输出:
// mixin 的 created 钩子
// 组件的 created 钩子

方法、计算属性和 watch

如果组件和 mixin 存在同名的方法、计算属性或 watch,组件的定义会覆盖 mixin 的定义。

结合你提供的代码,MapBaseMarker.js 组件混入了 MapBaseMixin.js,两个文件里都有 init 方法。当 MapBaseMarker 组件实例化时,调用的 init 方法是 MapBaseMarker.js 文件里定义的 init 方法,而非 MapBaseMixin.js 里的 init 方法。

javascript 复制代码
// MapBaseMixin.js
const MapBaseMixin = {
    methods: {
        init() {
            console.log('MapBaseMixin 中的 init 方法');
        }
    }
};

// MapBaseMarker.js
export default {
    mixins: [MapBaseMixin],
    methods: {
        init() {
            console.log('MapBaseMarker 中的 init 方法');
        }
    }
};

// 当创建 MapBaseMarker 组件实例时,调用的 init 方法是 MapBaseMarker 中的 init 方法

综上所述,当组件和 mixin 存在同名方法时,组件自身的方法会覆盖 mixin 里的同名方法。

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js