mixins选项必须是数组,如mixins: [myMixin],直接写mixins: myMixin会报错;data同名字段以组件定义为准,生命周期钩子按数组顺序执行,最后调用组件自身钩子。
mixins 选项必须是数组,不能是单个对象
直接写 mixins: mymixin 会报错,运行时提示 invalid value for option "mixins"。必须用数组包裹,哪怕只引入一个混入:mixins: [mymixin]。这是最常被忽略的语法门槛,尤其从 vue 2 全局混入(vue.mixin)转过来的人容易踩坑。
data 返回的对象属性会被组件 data 覆盖
混入里的 data() 和组件自身的 data() 合并时,同名字段以组件定义为准。比如混入中 data() { return { loading: false } },组件里也写了 data() { return { loading: true } },最终 this.loading 就是 true。这不是 bug,是设计行为——组件拥有最高优先级,确保业务逻辑不被混入意外劫持。
- 想让混入的初始值生效,就别在组件
data中重复声明该字段 - 若需“默认值 + 可覆盖”,可在混入中用函数返回默认,再由组件通过
created或mounted显式赋值 - 避免在混入和组件中都定义
list、page这类高频同名字段,除非你明确需要覆盖
生命周期钩子按 mixins 数组顺序依次执行,最后才是组件自身
多个混入共存时,created、onLoad 等钩子不会合并成一个函数,而是按 mixins: [a, b, c] 的顺序逐个调用,组件自身的钩子永远在最后。这对初始化顺序很关键:比如 a 混入负责拉取权限配置,b 混入依赖该权限初始化列表,就必须保证 a 在 b 前面声明。
- 不要假设混入钩子会“自动等”组件数据就绪——它比组件更早执行
- 如果混入里要访问
this.$refs或this.list,得确认这些已在组件data或前置混入中定义 - uni-app x 的 UTS 环境下,
defineMixin定义的混入同样遵循此规则,但不支持运行时动态构造数组
分页 mixin 必须显式声明 async getList 方法,否则运行时报错
典型分页混入会封装 onReachBottom 和 onPullDownRefresh,但内部调用的 getList() 是抽象方法,由具体页面实现。如果页面没提供这个方法,await this.getList() 会抛出 TypeError: this.getList is not a function。这不是类型检查问题,是运行时缺失。
- 务必在混入文档或注释里强调:引用方必须实现
getList - 可加一层防御:在混入方法开头判断
typeof this.getList !== 'function'并console.warn - uni-app x 的 UTS 混入不支持 JavaScript 风格的
throw new Error抛异常,要用throw Error(...)且注意类型声明
mixins: [pagination, auth],背后可能涉及十多个同名 data 字段的覆盖权、三套 onLoad 的执行时序、以及两组 methods 函数的命名冲突。真正稳住复用效果的,从来不是“用了混入”,而是清楚每一处合并发生在哪里、谁说了算。


















