mixin理解与应用--小程序适配iphoneX

Mixin对于封装一小段想要复用的代码来讲是有用的，可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

下面我们把小程序适配iphoneX的代码用mixin的方式封装一下
首先我们在mixins目录下新建一个phoneType.js文件
为了使用Mixin我们需要输出一个对象

image.png

• 在home.vue中引入这个Mixin
  即便我们使用的是一个对象而不是一个组件，生命周期函数对我们来说仍然是可用的，理解这点很重要。

(1) import phoneType from '../../../mixins/phoneType.js'   //引入组件
(2) export default {
    mixins: [phoneType],   //引入组件
}

（3）<div class="fixed-bar" :class="{'fixed-bar-ipx' : isIphoneX}"> //使用

合并

• 在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法

//phoneType.js
export default {
    onLoad() {
        console.log('phoneType.js')
    }
}    
//home.vue
export default {
    onLoad() {
        console.log('home.vue')
    }
}    
//先打印 phoneType.js'
//后打印 home.vue'

• 当我们应用Mixin的时候，有可能组件与Mixin文件中都定义了相同的生命周期钩子，这时候钩子的执行顺序是怎样的呢？
  Mixin上会首先被调用，组件上的接着调用， 组件中会覆盖Mixin中定义的，组件中的优先级最高。

与公用组件的区别

• 组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，本质上两者是相对独立的。
• mixins则是在引入组件之后，是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。