面试难点总结（一）

混入（mixin）:

不同的组件，作用是通过切换状态（Boolean类型）来展示或者隐藏模态框或提示框。这些提示框和模态框除了功能相似以外，用法不一样，但是逻辑一样。用来分发 Vue 组件中的可复用功能

      // 模态框
      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
        }
      }

我们可以在这里提取逻辑并创建可以被重用的项：

       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
         }
       };

在Modal.vue使用这样的写法，来引入这个Mixin:

    import Child from './Child'
    import { toggle } from './mixins/toggle'
 
    export default {
      name: 'modal',
      mixins: [toggle],
      components: {
        appChild: Child
      }
    }

即便我们使用的是一个对象而不是一个组件，生命周期函数对我们来说仍然是可用的。我们也可以这里使用mounted()钩子函数，它将被应用于组件的生命周期上。这种工作方式真的很灵活也很强大。

Mixin中的生命周期的钩子也同样是可用的。因此，当我们在组件上应用Mixin的时候，有可能组件与Mixin中都定义了相同的生命周期钩子，这时候钩子的执行顺序的问题凸显了出来。默认Mixin上会首先被注册，组件上的接着注册， 这样我们就可以在组件中按需要重写Mixin中的语句。组件拥有最终发言权 。当发生冲突并且这个组件就不得不“决定”哪个胜出的时候，这一点就显得特别重要，否则，所有的东西都被放在一个数组当中执行，Mixin将要被先推入数组，其次才是组件。

   //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!

如果这两个方法冲突了，实例的方法会执行两次（因为第一个函数被调用时，没有被销毁，它只是被重写了。我们在这里调用了两次sayHello()函数。）：

      //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!

结论

Mixin对于封装一小段想要复用的代码来讲是有用的，Mixin的优点是不需要传递状态，但缺点也显而易见可能会被滥用。