mixinintomixins官方解释Mixin（混入）提供了一种非常灵活的方式在Vue组件中分发可重用的功能。混合对象可以包含任意组件选项。当组件使用mixin时，mixin的所有选项都将“混合”到组件自己的选项中。简单来说，Mixins就是我们可以复用的代码块。在实际开发中，如果有些代码重复性很高，这时候就可以考虑Mixins的这个特性。简单的mixin示例exportdefault{data(){return{name:'namefrommixin',arr:[1,{arrName:'frommixin',arrMixin:'frommixin'},1233],obj:{name:'frommixin',value:'frommixin',mixin:'一个只能在mixin中可用的字段'}}},created(){console.log('我是由mixin创建的---')},mounted(){console.log('Iamamixinmounted---')this.getInfo()},methods:{getInfo(){console.log('Iamamixin,getInfo:',this.name)控制台。log('Iammixin'sobj:',this.obj)console.log('Iammixin'sarr:',this.arr)}}}组件使用importmixinDemofrom'./mixin.js'exportdefault{name:'',mixins:[mixinDemo],components:{},data(){return{name:'namefromcomponent',arr:[2,{arrName:'arrNamefromcomponent',title:'唯一字段标题'来自组件}],obj:{name:'来自组件名称',value:'来自组件值',title:'只有组件的title字段'}}},computed:{},watch:{},创建(){console.log('---我是创建的组件---')},mounted(){console.log('---我是安装的组件---')this.getInfo()},methods:{getInfo(){console.log('我是一个组件，getInfo:',this.name)console.log('我是一个组件的obj:',this.obj)console.log('我是一个componentarr:',this.arr)}}}控制台结果从上面的结果我们可以发现，生命周期钩子函数会结合起来，先执行mixin的钩子函数，再执行组件的钩子函数。数据同名的数据要具体情况具体讨论。如果是基本类型，mixin的数据会被组件的同名数据覆盖。但如果是对象，内部会递归合并数据对象，发生冲突时组件数据优先。类似于Object.assign(mixinObj,componentObj);对于数组，直接用组件中的数据优先方法的方法是一样的，组件的方法会覆盖mixin的同名方法。除了上述之外，还有方法、组件和指令，它们将被合并到同一个对象中。当两个对象的键名冲突时，取组件对象的键值对，覆盖同名的，组件优先。全局mixinsMixins也可以全局注册。谨慎使用！一旦使用全局混合，它将影响此后创建的每个Vue实例。如果使用得当，它可用于为自定义选项注入处理逻辑。mix-in引起的问题用多了容易混。后期维护时，不容易找到变量或方法。自定义指令directive介绍除了核心功能默认内置的指令（v-model和v-show），Vue还允许注册自定义指令。注意，在Vue2.0中，代码复用和抽象的主要形式是组件。但是，在某些情况下，您仍然需要对普通DOM元素进行低级操作，这时就会用到自定义指令。比如项目中常用的水印功能。我们将水印样式添加到div范围。可以使用自定义指令。先看效果图生成水印的方法有很多种。我们现在通过自定义指令进行操作，熟悉自定义指令的使用。先上传代码方法文件value,el)},update:function(el,binding){if(binding.oldValue!==binding.value){addWaterMarker(binding.value,el)}}}导出默认waterMarker注册自定义指令importVuefrom'vue'importwaterMarkerfrom'./watermark.js'Vue.directive(waterMarker.name,waterMarker)main.js全局调用import'./directive.js'。组件中使用的指令需要通过v-+指令名引用
