VUE复习笔记19（混入）

混入

基础

混入(mixins)是一种分发 vue 组件可复用功能中一种特别灵活的方式。混入对象可以包含任意的选项，所有混入对象的选项将被混入该组件本身的选项。

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

选项合并

当组件和混入对象含有同名选项时，这些选项会以恰当的方式混合。
比如数据对象在内部会进行浅合并（一层属性的深度），在和组件的数据发生冲突时，以组件数据优先。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    这里的`$data`指代与mixins同级的data，并非data中return的data
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

同名的钩子函数将混合为一个数组，所以都会被调用，另外，混入对象的钩子函数会在组件自身的钩子函数之前先进行调用。

var mixin = {
  data(){
    return{
      message:'hello',
      foo:'abc'
    }
  },
  created(){
    console.log('这是混入对象的钩子函数')
  }
}

new Vue({
  mixins:[mixin],
  data(){
    return{
      message:'goodbye',
      bar:'def'
    }
  },
  created(){
    console.log('这是组件自身的钩子函数');
  }
})

image.png

当混合值为对象的选项，例如 methods,components,directive，将被混合为同一个对象，两个对象键名冲突时，取组件的。

var mixin = {
  data(){
    return{
      message:'hello',
    }
  },
  created(){
    // console.log('这是混入对象的钩子函数')
  },
  methods:{
    foo(){
      console.log('foo function')
    },
    other(){
      console.log('other1 function')
    }
  }
}

var vm = new Vue({
  mixins:[mixin],
  data(){
    return{
      message:'goodbye'
    }
  },
  created(){
    // console.log('这是组件自身的钩子函数');
  },
  methods:{
    bar(){
      console.log('bar function');
    },
    other(){
      console.log('other2 function')
    }
  }
})
vm.foo();
vm.bar();
vm.other();

other方法由于冲突，所以取组件中的方法。

image.png

注意：Vue.extend() 也使用同样的策略进行合并。

全局混入

我们也可以进行全局注册混入对象，注意使用。一旦使用全局混入对象，将会影响所有你创建的 vue 实例，如果使用恰当可以对自定义的对象注入逻辑。
比如全局的判断等，会方便一些，不需要每个页面判断，直接取值就行了。

demo
实际项目运用中：
首先在 全局的main.js中进行全局的混入

Vue.mixin({
  created(){
    var myOption = this.$data.show;
    if(myOption){
      console.log('全局混入')
    }else{
      console.log('没进入全局混入')
    }
  }
})

//其他页面

此处的页面会根据对应页面中的 this.$data.show的值来进行判断显示渲染视图。

谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。也可以将其用作 Plugins 以避免产生重复应用

自定义选项合并策略

自定义选项使用默认策略，就是简单的覆盖默认值。如果想让自定义选项以自定义的逻辑合并， 可以向 Vue.config.optionMergeStrategies 添加一个函数：

也就是说，本来的选项的合并方式是默认的，但是我们可以通过修改添加一个函数，来修改合并的方式逻辑。

对于大多数的合并策略来说，可以使用 methods：

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

更多高级的例子可以在 Vuex 的 1.x 混入策略里找到：

const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions)
  }
}