【大前端】为什么需要 v-deep、:deep()

为啥需要deep

在现在单页面的开发中，我们经常遇到：在当前页面控制子级组件样式时，控制不了样式

Why？

为什么会这样了：

1. 通过代码可以看出控制不了样式的元素，都是组件动态挂在的元素，而是不是预编译的元素

2. 我们发现在框架编译后的样式中，预编译元素的每个样式类都是className[data-v-xxx]格式的，因为在style 标签中添加了scoped属性（<style lang="scss" scoped>），而scoped模式的作用就是为了防止页面组件之间出现样式污染的情况

所以就出现了scoped模式下不能控制动态元素样式的问题

什么是样式污染？

顾名思义：就是指多个组件定义了同样的样式类，但赋值了不同的样式，如果出现污染，那这些样式就会被取并集，应用到同一类元素

className[data-v-xx]

1. 生成className[data-v-xx] 前提是元素已经提前编写在了<template>模板元素中，能够被VUE探查到
2. data-v-xx：是用来标记和区分样式用的，框架在处理css时会根据style标签中的scoped属性判断是否需要区分样式

解决办法

框架提供了两个解决办法：

1. 一种就是去掉style中的scoped属性，让样式成为全局样式
2. 通过v-deep或:deep(className)

通过上面两种方式处理后，就会发现 data-v-xx没有了，而两者有什么区别了？

1. 第一种去掉scoped：去掉scoped属性后，当前组件的所有样式类都不会加 data-v-xx标记，虽然这样很方便，但这样很容易出现样式污染
2. 第二种使用v-deep或:deep(className) (推荐)：这种方法只是会消除className下所有样式类的 data-v-xx标记，不会消除父级样式类的 data-v-xx标记，可以有效防止出现样式污染（同时建议每个组件的根节点都加一个自定义的类名，书写时从根据点类名开始）