大厂前端架构实战之modal模态对话框管理

前言

这是我新开的一个关于前端知识的模块，主要讲解日常开发中常用的前端技巧。此模块讲解的知识都是能大幅提升前端性能的奇技淫巧，供大家日常交流，同时也希望大家不吝赐教，指出本人的不足。

本文使用的技术栈: vue3 + typescript + pinia + element-plus

背景

modal模态框又称之为弹出框、对话框，是前端日常开发最为频繁的组件之一。但是在日常开发过程中经常遇到一些性能、或者写法繁琐的问题。下面是我举例的一些常见问题：

1.modal框塞入当前页面会导致整个组件更新，影响性能

<template>  
    <div class="about">    
    <el-button class="todo-list--add-btn" @click="showModal">      
        添加任务    
    </el-button>    
    <ul>      
        <li 
            class="todo-list--item-box"       
            v-for="(item, index) in list"        
            :key="item.title">        
            &l