vue的可重用性

mixin的常见场景中混入了两个相似的组件。它们的基本功能是相同的，但之前它们之间存在差异。正常的思路是：是拆分成两个不同的组件，还是保留为一个组件，通过props传递？两种解决方案都不是完美的：如果拆分成两个组件，一旦功能发生变化，就必须冒着更新两个文件中代码的风险，并且如果通过props传值很快就会变得混乱，迫使维护人员在使用组件时要了解一大段上下文，拖慢编写代码的速度和使用mixin，vue中的mixin对于编写函数式风格的代码非常有用，因为函数式编程是通过更少的移动部分让代码更容易理解。Mixins允许你封装一段函数，可以被应用程序的其他组件使用，如果使用得当，它们不会改变函数范围之外的任何东西。基础实例我们有一对不同的组件，它们的作用是通过切换状态来显示或隐藏模态框或提示框。这些提示框和模态框除了功能相似外，没有任何共同之处。它们看起来不一样，用法也不一样，但是逻辑是一样的~~~~//ModalboxconstModal={template:'#modal',data(){return{isShowing:false}},methods:{toggleShow(){this.isShowing=!this.isShowing;}},components:{appChild:Child}}//提示框constTooltip={template:'#tooltip',data(){return{isShowing:false}},methods:{toggleShow(){this.isShowing=!this.isShowing;}},components:{appChild:Child}}我们可以在这里提取逻辑并创建可以重复使用的项目consttoggle={data(){return{isShowing:false}},methods:{toggleShow(){this.isShowing=!this.isShowing;}}}constModal={template:'#modal',mixins:[toggle],components:{appChild:Child}};constTooltip={template:'#tooltip',mixins:[toggle],components:{appChild:Child}};使用方法可以在项目中新建一个mixin目录，创建一个js文件，文件中需要输出一个对象。在modal.vue文件中导入这个mixinOptionMerge当组件和混入的对象有同名选项时，该选项将以适当的方式合并。内部会递归合并数据对象，解决与组件的冲突第一个同名的钩子函数会合并成一个数组，全部调用。混合在对象中的钩子将在组件钩子之前被调用。作为对象的选项，例如方法组件和指令，将被合并到一个对象中，当对象的键值发生冲突时，该组件将成为主要的自定义组件引入Vue允许自定义组件。在某些情况下，还需要对原生dom进行操作。这时候就需要用到自定义组件例子：输入框，默认焦点}}}钩子函数自定义组件有如下钩子函数bind，只调用一次，当指令第一次绑定元素时，这里可以初始化并设置插入。当绑定元素插入父节点时，调用更新。当组件所在组件的vnode更新时，调用componentUpdated。在command所在的componentvnode及其子vnode全部更新后，只调用一次unbind。当命令与元素解除绑定时调用它。Filtervue允许你自定义过滤器。它可以用于一些常见的文件格式。过滤器可以用在两个地方：双花括号插值和v-bind表达式（后者从2.1.0+开始支持）。应在JavaScript表达式的末尾添加过滤器，用“管道”符号表示：{{message|资本化}}