vue中hooks与minxins的区别

一、 mixin (Vue2)

mixin可以把多个组件共用的配置提取成一个换入对象

export const mixin_name = {
    methods:{
        showName(){
            alert(this.name)
        }
    },
}

引用minxins

<template>
    <div>
        <h2 @click="showName">学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
	import {mixin_name} from '../mixin'
    export default{
        name:'school',
        data(){
            return {
                name: 'xxx'
                address:'xxxx'
            }
        },
        //引入后上方的ShowName就可以正常使用了
        mixins:[mixin_name]
    }
</script>

注意事项：

• mixins中的生命周期会与引入mixins的组件的生命周期整合在一起调用
• 组件的data、methods、filters会覆盖mixins里的同名data、methods、filters

二、hook （vue3）

hook本质是一个函数，将setup函数中使用的Composition API进行封装，类似于Vue2中的mixin

//实现监控鼠标移动坐标的功能
import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function(){
   let point = reactive({
       x:0,
       y:0
   })
   
   function savePoint(event){
       point.x = event.pageX
       point.y = event.pageY
       console.log(event.pageX,event.pageY)
   }
   
   onMounted(()=>{
       window.addEventListener('click',savePoint)
   })
   
   onBeforeUnmount(()=>{
       window.removeEventListener('click',savePoint)
   })
   
   return point
}

引用hooks

<template>
    <h2>当前点击时鼠标坐标为x:{{point.x}},y:{{point.y}}</h2>
</template>

<script>
	import {ref} from 'vue'
    import usePoint from '../hooks/usePoint'
    export default{
        name:'Demo',
        setup(){
            const point = usePoint()
        }
    }
</script>

三、 mixin和hook的对比

mixin相比hook的缺点：
变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护
mixin中的变量和方法都是直接插入组件中的，不需要显式的调用，这样就会很难分清到底调用的是哪个mixin中的哪个方法
同名属性、同名方法无法融合，可能会导致冲突
minxin之间的同名属性、同名方法会导致冲突，也有可能相互覆盖输出结果，加上组件会覆盖mixin的同名方法和变量，乱上加乱
mixin和组件可能出现多对多的关系，复杂度较高
一个mixin可能对应多个组件，一个组件也可以使用多个mixin
hook的优点
hook是一个函数，mixin是一个对象
hook就是拆分版的mixin，将导入操作交给开发者，能够清楚地溯源每个属性和方法
minxin和hook的使用与对比
1. mixin (Vue2)
2. hook (Vue3)
3. mixin和hook的对比
Mixins 是vue2的用法，通过对象的方式进行定义和应用，在组件中的属性和方法会与组件本身的属性和方法进行合并，可能会导致命名冲突或不可预料的行为。
Hooks 是vue3的用法，使用函数的方式定义和使用，可以将相关的逻辑和状态封装为自定义的 Hook 函数，相对来说更安全。