16.vue.mixin

38 阅读1分钟

概念

mixin可以用来扩展组件,将公共逻辑进行抽离,在需要该逻辑的组件进行混入,采用策略模式****针对不同的属性进行合并,如果混入的数据和本身组件的数据冲突,采用“就近原则”,以组件的数据为准

混入方式

全局混入:用于编写插件

局部混入:复用逻辑

合并策略

核心:对象的合并处理

props、methods、inject、computed同名时会被替换

data会被合并

生命周期和watch会被合并成队列

components、directives、filters会在原型链上叠加

缺点

mixin中命名冲突、数据来源问题vue3采用compositionAPI提取公共逻辑非常方便

vue3的mixin也被称为hooks

//实现监控鼠标移动坐标的功能
import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function(){
    let point = reactive({
        x:0,
        y:0
    })
    
    function savePoint(event:any){
        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
}

使用

<script lang='ts' setup>
import { ref, reactive, toRefs, computed } from "vue";
import usepoint from '../src/hooks/usePoint'

const point = usepoint()
console.log('point', point)
</script>

image.png