• 欢迎光临~

Vue3笔记 - minxin和hook的使用与对比

开发技术 开发技术 2022-11-21 次浏览

minxin和hook的使用与对比

目录
  • minxin和hook的使用与对比
    • 1. mixin (Vue2)
    • 2. hook (Vue3)
    • 3. mixin和hook的对比

1. mixin (Vue2)

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

  • show.js文件(mixin)

    export const mixin_name = {
        methods:{
            showName(){
                alert(this.name)
            }
        },
    }
    
  • School.js文件(引用mixin)

    <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

2. hook (Vue3)

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

  • usePoint.js文件(hook)

    //实现监控鼠标移动坐标的功能
    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
    }
    

    Demo.js(引用hook)

    <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>
    

3. mixin和hook的对比

  • mixin相比hook的缺点

    • 变量来源不明确(隐式传入),不利于阅读,使代码变得难以维护

      mixin中的变量和方法都是直接插入组件中的,不需要显式的调用,这样就会很难分清到底调用的是哪个mixin中的哪个方法

    • 同名属性、同名方法无法融合,可能会导致冲突

      minxin之间的同名属性、同名方法会导致冲突,也有可能相互覆盖输出结果,加上组件会覆盖mixin的同名方法和变量,乱上加乱

    • mixin和组件可能出现多对多的关系,复杂度较高

      一个mixin可能对应多个组件,一个组件也可以使用多个mixin

  • hook的优点

    • hook是一个函数,mixin是一个对象
    • hook就是拆分版的mixin,将导入操作交给开发者,能够清楚地溯源每个属性和方法
程序员灯塔
转载请注明原文链接:Vue3笔记 - minxin和hook的使用与对比
喜欢 (0)
违法和不良信息举报电话:022-22558618 举报邮箱:dljd@tidljd.com