mixins的痛点是什么？
-
每个mixins都可以看做是一个Vue组件，一个组件的各种配置项它都可以有，这样，多个mixins叠加在一起的时候，它们之间是互相不知道对方的存在，它们的配置项在叠加的时候如果有重名，后面的就会覆盖前面的，但你并不知道谁被覆盖。
-
你在组件里使用来自mixins的数据或方法时，这个数据或者方法是突然出现的，你并不知道它来自哪个mixins。
组合式API的优点是什么？
我们先看在配置项式API里，比如data有20个数据，methods里有20个方法，是不是它们都会被<template>用到呢？不一定。但是组合式API就可以将数据和方法封装在setup函数里，最小暴露几个数据和方法给<template>使用。再看组合式API，组合式API优点之一就是，它是高封装、最小暴露的。它如何解决配置项式mixins的两个痛点：
- 组合式API中根本没有mixins的概念，而是使用js文件（我叫它混入js）导出一个对象，你想要的内容只是对象的一个属性。导出的对象不可能重名，导入的时候因为全看你怎么在组件里给对象取名，你当然不会让对象重名。事实上这并不是什么新鲜的东西，现代开发中写工具函数都是这样的写法，在脚手架中写API工厂函数也是这种写法，只是有些区别：
-
混入js除了提供函数还会提供数据和其他一些七七八八的东西，而工具函数只提供函数。
-
混入js经常是自己修改自己的数据，就仿佛Vue 2的Mixins一样的，而工具函数不提供数据，一定是修改外面传入的数据。
-
混入js很多时候不公用，只为一个组件服务，而工具函数一定是公用的。
-
混入js经常需要提供最终运算结果，而工具函数只提供一部分公共的计算过程，不管后续。
- 组件使用混入js的数据或方法也不会有一种“突然使用”的感觉，因为使用都是基于导出的对象，而你可以给对象取一个很明确的名字，解构对象是要写语句的，从语句就可以知道变量的来源。
举例
- 混入js（文件名mixin.js）：
范例都是随便写的， 有数据，有计算数据，有方法。
import {
ref,
computed
} from "vue";
export default function () {
let dataA = ref(3);
let compuDataA = computed(() => dataA.value * 2);
function dataAPlus(val) {
dataA.value += val;
}
return {
dataA,
compuDataA,
dataAPlus
};
}
- 组件：
我使用了setup标签语法。
可以看到，dataA和compuDataA在组件里都是响应式的，而且混入js的数据可以在组件中直接修改，依然是响应式的。组件内虽然定义了三个变量，但都指向混入js的各个属性。
<template>
<button @click="dataA = 300">{{ dataA }}</button>
<button @click="dataAPlus(10)">{{ compuDataA }}</button>
<div></div>
</template>
<script setup>
import mixin from "./mixin.js";
let { dataA, compuDataA, dataAPlus } = mixin();
</script>
如何解决多个混入js变量名冲突问题？
这根本不叫问题，不过还是说一下，怕诸位有人忘了解构赋值的高级用法。
假如又有个混入js，提供的数据也叫dataA，怎么重命名呢？或者，我觉得dataA名字不够明确，想改成xxMixinDataA，怎么重命名呢？
<template>
<button @click="dataB = 300">{{ dataB }}</button>
<button @click="dataAPlus(10)">{{ compuDataA }}</button>
</template>
<script setup>
import mixin from "./mixin.js";
let { dataA: xxMixinDataA, compuDataA, dataAPlus } = mixin();
</script>
还不明白就看解构赋值吧。
为什么混入js要提供一个函数，而不是静态对象？
-
为了复用。就跟配置项式API的data为什么是函数一个道理。
-
为了传参。
let { dataA: dataB, compuDataA, dataAPlus } = mixin();是可以给mixin函数传参的。
网友评论