写在前面

vue3中最为核心的特性就是组合式API，即是将业务逻辑相关的变量，methods都可以写在一起，对于可以抽离的逻辑，vue3中使用了类似于react的hooks，和vue2相比的mixin有较大的区别，下面来看下两者区别

vue3中的hook特性

直接上代码,对于home.vue，对于一段可复用的逻辑组件

<template>
  <div class="home">
    <div>{{ state.a }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import testHook from "../hooks/useTest";

export default defineComponent({
  name: "HomeView",
  components: {},
  setup() {
    const { m: n } = testHook();
    let state = reactive({
      a: 11,
    });
    state.a = n;

    return {
      state,
    };
  },
});
</script>

该vue组件使用useTest这个hook, 对于useTest.ts

import { onMounted } from "vue";

const testHook = function () {
  onMounted(() => {
    console.log("11");
  });
  const m = 1;
  return {
    m,
  };
};

export default testHook;

可以在该hooks中使用vue的钩子

• 可以看到，在vue3中通过hook的方式，很好复用了useTest中的逻辑

vue2中的mixin

home.vue

import auth from '../../mixin/auth';
export default {
    name: 'CommentListItem',
    mixins: [treeArrLength, auth],
    data(){
        return {}
    }

mixin/auth.js

    export default {
    computed: {
        ...mapState(['isShareTokenLogin', 'authorityList']),
    }
    methods: {}

vue3中hooks的特点与优势

• 很清楚是从哪个hooks中引入的，对比vue2中很多mixin时就会不知道是从哪里来的

• 可以基于解构设置别名，防止命名冲突， vue2中可能会冲突

• 写的hooks函数可以脱离整个组件存在，可以在hooks中使用onMounted, computed等（当然vue2也能实现这一点）