Vue3中对比mixin和compositionAPI

Vue3发布有一段时间了，最近在研究compositionAPI，一直想弄明白这个东西到底解决了什么问题，对比react中的hook感觉很像，但又有点不像，看了文档还是一头雾水，今天对比一下Vue2中的mixin，大概明白了它解决的问题是什么。

首先先来看看Vue2中使用mixin的逻辑代码：

// mixinTest.js:

export const miXin = {
  data() {
    return {
      mixinTest: "mixinTest",
      mixinData: 0
    }
  },
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello mixins!')
    },
    mixinAdd: function () {
      this.mixinData++
    }
  }
}

上面这一段代码，如果用compositionAPI写，将会变成这样：

// compositionTest.ts:

import { 
  ref,
  onMounted
} from "@vue/composition-api";

/**
 * 提取出逻辑部分的代码
 */
export default function () {
  const compositionData = ref(0);
  const compositionTest = ref("compositionTest");

  function compositionAdd() {
    compositionData.value++
  }

  onMounted(() => console.log("composition mounted !"))

  return {
    compositionData,
    compositionTest,
    compositionAdd
  }
}

下面写一个页面来使用这个两个逻辑代码：

// App.vue:

<template>
  <div id="root">
    <div style="font-size: 20px;">{{ mixinTest }}</div>
    <div>{{ mixinData }}</div>
    <el-button @click="mixinAdd">mixinAdd</el-button>
    <h1>componentitionApi</h1>
    <div style="font-size: 20px;">{{ compositionTest }}</div>
    <div>{{ compositionData }}</div>
    <el-button @click="compositionAdd">compositionAdd</el-button>
  </div>  
</template>

<script>
import { 
  defineComponent,
  computed,
  nextTick,
  ref,
  watch,
  onMounted,
  onUpdated
} from "@vue/composition-api";
import { miXin } from "./mixinTest.js";
import useTest from "./compositionTest.ts";

export default {
  name: 'test',
  // 对比mixin、compositionAPI
  mixins: [miXin],
  setup(ctx, props) {
  	// 对比mixin、compositionAPI，这里看出compositionAPI可以细化到其中某个方法是否错误
    const { compositionData, compositionTest, compositionAdd } = useTest();
    return {
      compositionData,
      compositionTest,
      compositionAdd
    }
  }
}
</script>