Vue 动态添加class可能带来的问题（被覆盖）

        使用vue的伙伴相信都会使用动态class方便修改元素样式，也就是下面这种

 通过控制flag 的 true / false 来决定addClass 这个类是否生效

        当然，如果需求仅仅如上述图片所述，是不会出现什么问题的，但现在有一个 额外的dom操作，为span 动态添加了一个类（此处 后面会着重说明场景）， 例如 为他添加一个 red 类：

 下面是addRedClass方法：(this as any) 是为了解决vue3 + ts 使用$refs 报错问题 不是本章的重点， 重点在于 通过js dom操作为span元素添加.red类样式

methods:{
  addRedClass(){
    (this as any).$refs['span'].classList.add('red')
 }
}

 以下为  vue动态class 会覆盖掉 通过dom操作添加的class样式 的复现

默认状态：

 

点击 第二个按钮 （js 为span添加类名为red的class） ：

 

当点击第一个按钮 （vue动态class）

 

 

        到这里，可以发现 通过js 添加的red类。 在点击vue动态class按钮后，被覆盖掉了，自然 red的样式也消失了， 这显然不是我们期待的结果，我们期待的结果应该是 同时出现

class=“static red addClass” 三种情况才对 

        问题复现完毕，现在是解释刚刚红字提到的内容：

在日常开发中，既然使用vue 开发 其实很少情况会 自己手动 通过js 使用dom 为元素添加class，但是我们除了使用vue开发，还会使用一些第三方 框架辅助， 例如bootstrap等，

这些框架 可能在他本身 会通过js 操作dom 元素为其添加class 从而达到 一些样式效果，而vue 动态class 却会覆盖掉本该 为bootstrap提供效果的class，从而出现一些 难以预料的bug

如果看到这里，对您有帮助，恰逢您也登录了，可否留下一些您的痕迹（暗示～～～）