Vue中mixin与hooks的区别

在组件中，有些常用的数据我们会提取出来，在vue2中我们最常用到的就是mixin，在vue3中我们通过会暴露出一个方法，在别的组件中方便调用。

mixin是一个简单的对象

通常我们的mixin是一个简单的js对象，一般如下：

export  const mixinA = {
    data() {
        return {
            name:'狄仁杰'
        };
    },
    method:{
        funA(){
            console.log(this.name)
        }
    }
}

引用的时候我们是这样的。

<template>
  <div id="app">
   <div class="inputName">{{StudentName}}</div>
    <button @click="Start">开始</button>
    <div>显示的是混入的名称：{{name}}</div>
  </div>
</template>

<script>
import {mixinA} from "@/tool/mixin";
export default {
  name: 'App',
  data(){
    return{
      msg:'1233',
      StudentName:'',
      names:["张亚薇"]
    }
  },
  mixins:[mixinA],
  created() {
    console.log(this.name)
  },
  methods:{
    ab(a,b){
      this.comp = b;
      this.msg= a;
    },
    Start(){
      let Num = Math.floor(Math.random() * 70) + 2;
       this.StudentName = this.names[Num]
    }
  }
}
</script>

hooks是对外暴露出的一个函数

创建一个hooks文件

在setup中进行引入使用

总结：

mixin是vue2中的方法，方便了在编写过程中数据与函数的重复使用，但是如果在调试的话会会出现一个溯源的问题，就是你一时间分不清所用的数据，是当前组件本身的，还是你外来引入的。mixin整体上是暴露出的一个引用对象，在使用时有可能造成，mixin中的名称与组件中的名称发生冲突。

hooks是仿照着react中而来的，在使用时是对外暴露出的一个函数，在引用时需要进一步调用。在使用上更安全更加的独立。