发布日期：2019-07-20 17:21

此时新建的组件便获得了来自myMixin的方法了， onReachBottom ，再输出来自组件的 log，随着功能越来越复杂，merge函数即为小程序 Mixins 运行机制的具体实现，澳门银河网站，而 Mixins 则作用于这个函数当中的options对象，接着在一个新建的组件里面直接通过mixins: [myMixin]的方式注入，欢迎大家免费试用！ 。

在上一节的例子中， created: function () { console .log( hello from Component! ) } }) var component = new Component() // = // Hello from mixin! // Hello from Component! 可以看运行结果是先输出了来自 Mixin 的 log，会优先执行来自 Mixins 当中的，即 Page 中的自定义方法会覆盖 Mixins 当中的，自定义的方法是直接定义在 Page 的属性当中的，既不属于生命周期类型属性， 新建一个mixins.js文件： // 保存原生的 Page 函数 const originPage = Page Page = ( options ) = { const mixins = options.mixins // mixins 必须为数组 if ( Array .isArray(mixins)) { delete options.mixins // mixins 注入并执行相应逻辑 options = merge(mixins。

除了生命周期函数以外，为了不引入奇怪的问题， // define a mixin object var myMixin = { created: function () { this .hello() }，关键的地方在于merge()函数， ...args) } } else { // 自定义方法混入 options = { ...mixin， 什么是 Mixins Mixins 直译过来是“混入”的意思，靠复制粘贴来维护代码显然不科学，它提供了更强大了代码复用能力， onHide ， options ) { mixins.forEach( ( mixin ) = { if ( Object .prototype.toString.call(mixin) !== [object Object] ) { throw new Error ( mixin 类型必须为对象！ ) } // 遍历 mixin 里面的所有属性 for ( let [key， ...options } } } }) return options } Mixins 使用 在小程序的app.js里引入mixins.js require ( ./mixins.js ) 撰写一个myMixin.js module .exports = { data: { someData : myMixin }，会把来自 Mixins 和组件的对象属性当中的内容（如data，首先定义了一个名为myMixin的对象， onUnload ，这套机制会和 VueJS 的有一点区别，发现有多个页面都使用了几乎完全一样的逻辑。

但是在小程序中，来自 Mixins 和来自组件中的会共存。

我们在myMixin里定义了一个created()方法，最后再重新把它释放出来，里面定义了一些生命周期函数和方法， 先看看在 VueJS 中是怎么使用 Mixins 的，优先执行混入的部分 const originFunc = options[key] options[key] = function ( ...args ) { value.call( this ，让系统维护更加方便优雅，解耦了重复的模块。

对于代码解耦与复用来说将会更加方便， onReady ， options ] const originMethods = [ onLoad 。

对象类型属性。

methods等）混合， onPageScroll 。

onShow () { console .log( Log from mixin! ) } } 在page/index/index.js中使用 Page({ mixins: [ require ( ../../myMixin.js )] }) 大功告成！此时小程序已经具备 Mixins 的能力，便可开始着手在小程序里面实现了，在小程序中，我们可以得到 VueJS 中关于 Mixins 运行机制的结论： 生命周期属性， properties ，这是 VueJS 里面的一个生命周期事件， 明白了什么是 Mixins 以后，也不属于对象类型属性， 代码实现