vue混入mixins详解和生命周期影响

1. mixins混入介绍

mixins 选项接收一个混入对象的数组。一个混入对象可以包含任意的组件选项(vue里script的部分),这些选项将会被合并到最终的选项中,使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说,如果你的混入包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用。混入对象也可以包含data、created、mounted、methods、filters等等,它们将会被合并到组件自己的选项上。

2. 为什么使用mixins

可以理解为一个扩展包,引入之后,可以给组件扩展一些功能,比如组件的初始化,组件的销毁,组件的监听,组件的过滤等,可以减少组件的代码量,提高代码的复用率。相当于在引入后,父组件的各种属性方法都被扩充。

注意:minxins里面同名的方法和属性,会被父组件覆盖。

3. 局部混入用法

先定义一个minxins.js文件,里面导出一个包含vue option选项的对象,然后在需要的页面里面使用mixins选项引入即可。

  • minxins.js
javascript 复制代码
export const commonMixins = {
  data() {
    return {
      name: '张三'
    }
  },
  mounted() {
    this.name = '李四'
    this.consolelog()
  },
  methods: {
    consolelog() {
      console.log(this.name)
    }
  }
}
  • home.vue
javascript 复制代码
<template>
  <div class="home_box">
    <p>{{ this.name }}</p>
  </div>
</template>

<script>
import { commonMixins } from '@/utils/mixins.js'

export default {
  name: 'Home',
  mixins: [commonMixins],
  data() {
    return {
      keyword: '',
    }
  }
}
</script>

4. 全局混入用法

先先定义一个minxins.js文件,里面导出一个包含vue option选项的对象。然后在main.js中使用,其余页面就不用再引入了。

  • main.js
javascript 复制代码
import commonMixins from '文件路径/mixin';
Vue.mixin(commonMixins)

const app = new Vue({
  render: h => h(App),
  router,
  store
})

app.$mount('#app')

5. 生命周期顺序

混入之后,生命周期执行顺序如下:

javascript 复制代码
mixin的beforeCreate 
↓
父beforeCreate
↓
mixin的created
↓
父created
↓
mixin的beforeMount
↓
父beforeMount
↓
子beforeCreate
↓
子created
↓
子beforeMount
↓
子mounted
↓
mixin的mounted
↓
父mounted

如果看了觉得有帮助的,我是鹏多多,欢迎 点赞 关注 评论;

往期文章

个人主页

相关推荐
飞翔的佩奇2 分钟前
【完整源码+数据集+部署教程】【运动的&足球】足球比赛分析系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球比赛分析系统
支付宝体验科技5 分钟前
SEE Conf 2025:开启体验科技的新十年
前端
TeamDev6 分钟前
使用 Shadcn UI 构建 C# 桌面应用
前端·后端·.net
尘世中一位迷途小书童33 分钟前
Vuetify Admin 后台管理系统
前端·前端框架·开源
参宿733 分钟前
图解Vue3 响应式,手动实现核心原理
前端·javascript·vue.js
2301_8012522240 分钟前
前端框架Vue(Vue 的挂载点与 data 数据对象)
java·前端·javascript·vue.js·前端框架
资讯第一线1 小时前
《Windows Server 2022》 [2025年10月版 ] [官方IOS] 下载
前端
非凡ghost1 小时前
EaseUS Fixo(易我视频照片修复)
前端·javascript·后端
非凡ghost1 小时前
Avast Cleanup安卓版(手机清理优化)
前端·javascript·后端
豆苗学前端1 小时前
长时间不操作自动退出登录(系统非活跃状态下自动登出机制的企业级设计方案)
前端·后端·面试