vue3个人最佳实践记录（3）- Dialog组件的封装

更新日志

2024/4/28号 潜在性能问题从主观上不存在

Dialog组件一般会作为新建或者修改对象的视图展示，有两种实现方法

但是其实并不局限此，如果从UI = render（data）的角度，都是可以的

实现的两种方式

v-show

优点：
    1. DOM结构保留
    2. 频繁切换下 性能更优 （不涉及销毁新建）
缺点：
    1. 组件状态需要开发者主动重置（心智负担）
    2. 隐藏的DOM结构仅适用于部分用户

v-if

优点：
    1. 惰性渲染
    2. 节省内存
    3. 无需考虑组件状态的重置
    4. v-if 的时机可以选取为异步事件直接结束，避免了watch带来的代码不优雅
缺点：
    1. 频繁切换下 潜在性能问题
特别说明：
    1. 模板的编写在我理解是声明式的一种方式
       那么是否是性能问题，其实本质上开发人员（我们）带来的
       所以如果有性能问题，应该切换组件带来的
       而不能说v-if带来了问题，应该去关注当前组件是否带来了潜在问题

那么该如何选取实践方式呢

如果组件在v-if的实现方式下，没有性能问题，那么就用v-if，否则使用v-show，这样我们可以更专注于业务，而无需要分出精力去重置组件的状态

后续会陆续分享vue3个人觉得最佳实践