17.mixin和Composition API

(mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 在vue2中会有一些使用,对于公共的函数,变量可以起到一个复用的效果.但是也可能会出现一些意想不到的问题(比如冲突)而导致不好排查bug

局部引用

components//
export default {
  data: () => ({
    count: 1
  }),
  methods: {
    addCount() {
      count += 1;
    }
  }
};

组件内引用

<template>
  <div class="xx-container">
    这是本组件的count: {{ count1 }}
    <br />
    这是混入的count: {{ count }}
  </div>
</template>
<script>
import mixin from './Component.js';
export default {
  mixins: [mixin],
  data() {
    return {
      count1: 12
    };
  }
};
</script>

效果: 可以发现我们的mixin可以看做一个单独的函数式组件,里面可以包含data,或者其他的函数,watch,computer,在其他组件中可以通过局部引入,然后mixins注册.

全局混入

在main注册

Vue.mixin({
  data: () => ({
    count: 1
  }),
  methods: {
    addCount() {
      count += 1;
    }
  },
  created() {
    console.log('mixin的created');
  }
});

app组件使用

<template>
  <div id="app">
    app的count:{{ count }}
    <router-view />
  </div>
</template>

其他组件使用

<template>
  <div class="xx-container">
    这是本组件的count: {{ count1 }}
    <br />
    这是home混入的count: {{ count }}<button @click="count += 1">count+1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count1: 12
    };
  }
};
</script>

结果:

我们可以看到在组件内可以直接使用该变量 而且不会影响到其他地方. 而且created函数在2个组件和vue实例中都分别调用了一次.

变量,函数重复

混入

export default {
  data: () => ({
    count: 1,
    obj: {
      a: 1,
      b: 2,
      c: 3
    }
  }),
  methods: {
    addCount() {
      this.count += 1;
    }
  },
  created() {
    console.log('mixin的created');
  },
  computed: {
    computedNum() {
      return 333;
    }
  }
};

组件内

<template>
  <div class="xx-container">
    简单数据类型count: {{ count }} <button @click="addCount">countAdd</button>
    <br />
    复杂数据类型obj:{{ obj }}
    <br />
    计算属性computedNum:{{ computedNum }}
  </div>
</template>
<script>
import mixin from './Component.js';
export default {
  mixins: [mixin],
  data() {
    return {
      count: 12,
      obj: {
        a: 13
      }
    };
  },
  methods: {
    addCount() {
      this.count += 100;
    }
  },
  created() {
    console.log('组件的created');
  },
  computed: {
    computedNum() {
      return 222;
    }
  }
};
</script>

结果:

对于简单数据和methods里面的方法以组件内部为主. 生命周期函数先执行混入里面的再执行组件内部的 对象数据会拼接在一起,重复了的以组件为主 计算属性和watch以组件为主

总结

混入对于一些全局都会使用变量或者函数确实有很好的帮助,但是还是尽量使用局部使用,1可以节约性能.2避免出现一些意料之外的bug

这些问题再vue3的Composition API中克服了mixin问题 Composition API的主要思想是，我们将它们定义为从新的 setup 函数返回的JavaScript变量，而不是将组件的功能（例如state、method、computed等）定义为对象属性。

mixin模式表面上看起来很安全。然而，通过合并对象来共享代码，由于它给代码增加了脆弱性，并且掩盖了推理功能的能力，因此成为一种反模式。

Composition API最聪明的部分是，它允许Vue依靠原生JavaScript中内置的保障措施来共享代码，比如将变量传递给函数和模块系统。