vue3 hook如何重构DataV的全屏容器组件

今天小编给大家分享一下vue3 hook如何重构DataV的全屏容器组件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

实现

创建组件

fullScreenContainer.vue

<template>  <div id="dv-full-screen-container" :ref="autoBindRef">    <slot></slot>  </div></template><script setup lang="ts">import { useAutoResize } from '@/hooks/useAutoResize'const { autoBindRef } = useAutoResize()</script>

自定义一个hook，导出一个autoBindRef绑定ref

自定义hook文件

useAutoResize.ts

import { ref } from 'vue';export function useAutoResize() {    let domRef = ref<HTMLElement | null>();    function autoBindRef() {    }    return {        autoBindRef    }}

1、绑定domRef

确保先获取到dom元素，逻辑才可以继续往下走。

创建一个函数，用于检测获取正确的dom元素

function getRefDom(ref: HTMLElement | ComponentPublicInstance): HTMLElement | null {  // ref指向dom，则返回ref  // isElement检查指定的值是否为DOM元素  if (isElement(ref)) {    return ref as HTMLElement  }  // 若ref指向组件实例，通过$el获取dom元素  if (isElement((ref as ComponentPublicInstance).$el)) {    return (ref as ComponentPublicInstance).$el  }  return null}

自动绑定组件domRef

export function useAutoResize() {    let domRef = ref<HTMLElement | null>();    const autoBindRef = once((ref: HTMLElement | ComponentPublicInstance) =>  {        const  dom = getRefDom(ref);        if(!dom) {            console.warn("绑定组件domRef失败！")            return;        }        domRef.value = dom;    })    return {        autoBindRef    }}

2、初始化

export function useAutoResize() {    onMounted(() => {        initDom(domRef.value)        initConifg(domRef.value)    })}

mounted时期，dom都已挂载完毕，故需在此周期获取dom元素。

2.1、初始化dom

function initDom(dom:HTMLElement) {    const { clientWidth = 0, clientHeight = 0 } = dom || {}    if(!dom) {        console.warn("获取dom节点失败，组件渲染可能异常!")        return    } else if(!clientWidth || !clientHeight) {        console.warn("组件宽度或高度为0px，可能会出现渲染异常!")        return    }    // 设置缩放比例    if(typeof setAppSacle === 'function') setAppScale(dom)}

2.2、初始化设备

获取到dom后，将获取到的设备屏幕分辨率宽高设置给dom。

function initConfig(dom:HTMLElement) {    const { width, height } = screen || {}    dom.style.width = `${width}px`;    dom.style.height = `${height}px`;}

2.3、设置缩放效果

function setAppScale(dom:HTMLElement){    const currentWidth = document.body.clientWidth;    const { width } = screen || {};    dom.style.transform = `scale(${currentWidth / width})`;}

当dom元素改变/窗口大小变化时，触发这个函数。

3、监听/移除事件

需要同时对dom元素和窗口大小的变化监听

dom元素监听

这里我们使用MutationObserver来对dom元素的变化来监听

function observerDomResize(dom: HTMLElement, callback: () => void) {    const observer = new MutationObserver(callback);    observer.observe(dom, {        attributes: true,        attributeFilter: ['style'],        attributeOldValue: true,    })    return observer}

在mounted周期内设置监听

export function useAutoResize() {    const handleInitDom = () => {        initDom(domRef.value)    }    onMounted(() => {        initDom(domRef.value)        initConifg(domRef.value)        observerDomResize(domRef.value, handleInitDom)        window.removeEventListener('resize', handleInitDom);    })}

但是如果我们直接这样写，他就会频繁调用handleInitDom函数，造成性能浪费，所以使用防抖函数先包装一下事件处理函数handleInitDom再调用。

export function useAutoResize() {    const domSizeEffectDisposer: (() => void)[] = [];    const debounceInitDomFun = debounce(handleInitDom, 300)    onMounted(() => {        initDom(domRef.value)        initConifg(domRef.value)        observerDomResize(domRef.value, debounceInitDomFun)        window.removeEventListener('resize', debounceInitDomFun);        domSizeEffectDisposer.push(          () => {            if (!observer) return            observer.disconnect();            observer.takeRecords();            observer = null;          },          () => {            window.removeEventListener('resize', debounceInitDomFun);          }        );    })}

监听了事件，那么在组件卸载时就要清除它

onUnmounted(() => {    domSizeEffectDisposer.forEach(disposer => disposer())  })

以上就是“vue3 hook如何重构DataV的全屏容器组件”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。