在 Vue.js 中使用混合 —— CSS-Tricks

   <p>有一种很常见的情况：有两个非常相似的组件，它们共享同样的基本函数，并且它们之间也有足够的不同，这时你站在了一个十字路口：我是把它拆分成两个不同的组件？还是只使用一个组件，创建足够的属性来改变不同的情况。</p>    <p>这些解决方案都不够完美：如果你拆分成两个组件，你就不得不冒着如果功能变动你要在两个文件中更新它的风险，这违背了 DRY 前提。另一方面，太多的属性会很快会变得混乱不堪，对维护者很不友好，甚至是你自己，为了使用它，需要理解一大段上下文，这会让你感到失望。</p>    <p>使用混合。Vue 中的混合对编写函数式风格的代码很有用，因为函数式编程就是通过减少移动的部分让代码更好理解（引用于 <a href="/misc/goto?guid=4959750106654737139" rel="nofollow,noindex">Michael Feathers</a> ）。混合允许你封装一块在应用的其他组件中都可以使用的函数。如果被正确的使用，他们不会改变函数作用域外部的任何东西，所以多次执行，只要是同样的输入你总是能得到一样的值。这真的很强大。</p>    <h3>基础实例</h3>    <p>我们有一对不同的组件，它们的作用是切换一个状态布尔值，一个模态框和一个提示框。这些提示框和模态框除了在功能上，没有其他共同点：它们看起来不一样，用法不一样，但是逻辑一样。</p>    <pre>  <code class="language-javascript">// 模态框  const Modal = {    template: '#modal',    data() {      return {        isShowing: false      }    },    methods: {      toggleShow() {        this.isShowing = !this.isShowing;      }    },    components: {      appChild: Child    }  }    // 提示框  const Tooltip = {    template: '#tooltip',    data() {      return {        isShowing: false      }    },    methods: {      toggleShow() {        this.isShowing = !this.isShowing;      }    },    components: {      appChild: Child    }  }</code></pre>    <p>我们可以提取出这个逻辑并创建可以被重用的项：</p>    <pre>  <code class="language-javascript">const toggle = {    data() {      return {        isShowing: false      }    },    methods: {      toggleShow() {        this.isShowing = !this.isShowing;      }    }  }    const Modal = {    template: '#modal',    mixins: [toggle],    components: {      appChild: Child    }  };    const Tooltip = {    template: '#tooltip',    mixins: [toggle],    components: {      appChild: Child    }  };</code></pre>    <p>查看 Sarah Drasner( <a href="/misc/goto?guid=4959750106747660643" rel="nofollow,noindex">@sdras</a> ) 在 <a href="/misc/goto?guid=4959750106831607434" rel="nofollow,noindex">CodePen</a> 上编写 <a href="/misc/goto?guid=4959750106912091782" rel="nofollow,noindex">混合</a> 的例子</p>    <p>为了更容易理解混合，这个例子故意编写的简单一些。真实应用中使用混合的有，包含但不限于：获取视窗和组件的尺寸，采集特定的鼠标事件和图表的基本元素。Paul Pflugradt 有一个关于 <a href="/misc/goto?guid=4959750106998133747" rel="nofollow,noindex">Vue Mixins 的优秀项目</a> ，但值得一提的是它是用 coffeescript 编写的。</p>    <h3>用法</h3>    <p>这个例子没有告诉我们在一个真实的应用中如何使用，所以，我们看看接下来要怎么做。</p>    <p>你可以按照你喜欢的任意方式设置你的目录结构，但为了更好的组织结构我喜欢新建一个 mixin 目录。我们创建的这个文件含有 .js 扩展名（跟 .vue 相对，就像我们的其他文件），并且为了混合我们需要输出一个对象。</p>    <p><img src="https://simg.open-open.com/show/ee54b93976750f7029f33ce953270a81.jpg"></p>    <p>接着在 Modal.vue 中使用它，通过像下面这样的引入方式：</p>    <pre>  <code class="language-javascript">import Child from './Child'  import { toggle } from './mixins/toggle'    export default {    name: 'modal',    mixins: [toggle],    components: {      appChild: Child    }  }</code></pre>    <p>即使我们使用的是一个对象而不是一个组件，生命周期函数对我们来说仍然是可用的，理解这点很重要。我们可以在这使用 mounted() 钩子函数，它将被应用于组件的生命周期上，这种工作方式真的很灵活也很强大。</p>    <h3>合并</h3>    <p>看最后这个例子，我们可以看到，我们不仅有自己的函数，而且来自于混合的生命周期函数对我们来说也是可用的，所以当在组件上注册重复的过程时，顺序很重要。默认混合上会首先被注册，组件上的接着注册，这样如有必要我们可以重写它。 <strong>组件拥有最终发言权</strong> 当有一个冲突并且这个组件不得不“决定”哪个胜出的时候，这真的变得很重要，否则，所有的东西都被放在一个数组当中执行，混合中的先执行，组件中的接着执行。</p>    <pre>  <code class="language-javascript">//mixin  const hi = {    mounted() {      console.log('hello from mixin!')    }  }    //vue instance or component  new Vue({    el: '#app',    mixins: [hi],    mounted() {      console.log('hello from Vue instance!')    }  });    //Output in console  > hello from mixin!  > hello from Vue instance!</code></pre>    <p>如果这两个冲突了，我们看看 Vue实例或组件是如何取胜的：</p>    <pre>  <code class="language-javascript">//mixin  const hi = {    methods: {      sayHello: function() {        console.log('hello from mixin!')      }    },    mounted() {      this.sayHello()    }  }    //vue instance or component  new Vue({    el: '#app',    mixins: [hi],    methods: {      sayHello: function() {        console.log('hello from Vue instance!')      }    },    mounted() {      this.sayHello()    }  })    // Output in console  > hello from Vue instance!  > hello from Vue instance!</code></pre>    <p>你可能已经注意到这有两个 console.log 而不是一个——这是因为第一个函数被调用时，没有被销毁，它被重写了。我们两次调用的都是 sayHello() 函数。</p>    <h3>全局混合</h3>    <p>当我们使用全局混合时，我们不是指能够在每个组件上访问它们，就像是过滤器一样。我们能够通过 mixins:[toggle] 访问组件上的混合对象。</p>    <p>全局混合被注册到了 <em>每个单一组件上</em> 。因此，它们的使用场景极其有限并且要非常的小心。一个我能想到的用途就是它像一个插件，你需要赋予它访问所有东西的权限。但即使在这种情况下，我也对你正在做的保持警惕，尤其是你在应用中扩展的函数，可能对你来说是不可知的。</p>    <p>为了创建一个全局实例，我们可以把它放在 Vue 实例之上。在一个典型的 Vue-cli 初始化的项目中，它可能在你的 main.js 文件中。</p>    <pre>  <code class="language-javascript">Vue.mixin({    mounted() {      console.log('hello from mixin!')    }  })    new Vue({    ...  })</code></pre>    <p>再次提醒，小心使用它！那个 console.log 将会出现在每个组件上。这种情况还不算坏（除了控制台上有多余的输出），但如果它被错误的使用，你将能看到它会多么的有害。</p>    <h3>结论</h3>    <p>混合对于封装一小段想要复用的代码来讲是有用的。对你来说它们当然不是唯一可行的选择：高阶组件，例如，允许组合相似函数，这只是实现的一种方式。我喜欢混合，因为我不需要传递状态，但是这种模式当然也可能会被滥用，所以，仔细思考哪种选择对你的应用最有意义。</p>    <p> </p>    <p>来自：http://www.zcfy.cc/article/using-mixins-in-vue-js-css-tricks-3257.html</p>    <p> </p>