vue[混入功能的探索学习]

vue中的混入功能其最主要的目的是为了提取组件之间的通用代码，维护组件之间的关联，这个功能不会用也不会影响开发，但是如果会用混入，会让开发变得更加的快捷。

混入的四点总结：

第一点：混入仅仅针对组件中的 script 标签所包裹的内容。且本身内容为js相关内容(常用方式)。

代码示例

// mixinTest.js的混入文件内容
export default{
  data() {return {}},
  computed:{},
  methods: {},
  created(){},
  ......
}
// .vue的组件内容
<script>
import mixinTest from '../mixinTest.js';
export default{
  mixins: [mixinTest],
  data() {return {}},
  computed:{},
  methods: {},
  created(){},
  ......
}

可以看出混入的选项内容和组件的script包裹的选项内容其实是一样的。
而在实际的项目中通常混入的内容会被放置在一个.js的文件中表示。
如：

在这里封装了一个分页内容的通用混入模块，通过export default的方式导出这个通用的混入js内容，然后在需要的地方引用并且通过mixins注册即可。
如：

注意：混入仅仅提取script相关的通用代码，与组件的复用还是有很大的区别的。

第二点：混入的使用规则：2点规则(核心)

了解的混入的使用规则决定着一个人是否会用混入这个功能，因此常规规则的了解与记忆是必须的。
需要记住2点规则：

1. 混入对象导入到组件中的时候将进行合并操作。如果有名称相同的内容，则以组件的数据优先。否则直接合并两者的内容
   如：

// mixinTest.js的混入文件内容
export default{
  data() {
    return {
      message: 'mixin hello',
      foo: 'mixin abc'
    }
  },
  methods: {
    foo() {
      console.log('mixin foo')
    },
    conflicting() {
      console.log('from mixin')
    }
  }
}
// .vue的组件内容
<script>
import mixinTest from '../mixinTest.js';
export default{
  mixins: [mixinTest],
  data() {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  methods: {
    bar() {
      console.log('foo')
    },
    conflicting() {
      console.log('from component')
    }
  }
}
</script>

// 混入合并的最终结果
/* 
<script>
export default{
  // 混入的内容将进行合并，并且同名的内容以组件为优先
  data() {
    return {
      message: 'goodbye',
      bar: 'def',
      foo: 'mixin abc'
    }
  },
  methods: {
    bar() {
      console.log('foo')
    },
    foo() {
      console.log('mixin foo')
    },
    conflicting() {
      console.log('from component')
    }
  }
}
</script>
*/

2. 混入对象导入到组件中的时候将进行合并操作。如果有同样的生命周期钩子函数，那么两个钩子函数中的内容都将会执行，且混入对象的钩子函数将在组件钩子函数之前调用，两者之间互不影响

// mixinTest.js的混入文件内容
export default{
   created(){
    let a = 123;
    console.log('混入钩子a变量',a);
  }
}
// .vue组件中的内容
<script>
import mixinTest from '../mixinTest.js';
export default{
  mixins: [mixinTest],
  created(){
    let a = 456;
    console.log('组件钩子a变量',a);
  }
}
</script>

// 最终结果
/*
// => "混入钩子a变量 123"
// => "组件钩子a变量 456"
*/

第三点：全局混入：用的少

全局混入可以使用vue.mixin的形式进行注册

Vue.mixin({
  created: function () {
  	console.log("全局混入内容")
  }
})

但是不推荐使用全局混入，因为一旦引用所有的组件都将会受到影响。

第四点：自定义选项合并策略：用的少

这个内容用的比较少，特殊情况需要的时候看api即可