This is the second day of my participation in Gwen Challenge. In my previous interview, I met a question about scoped! The first reaction is “what?”, but in vue development we habitually add style to scoped to indicate that the style of the current component only applies to the current component (which of course is also the answer, which is a hint of what I’m going to do ！！！！) In fact, that answer is correct, but not comprehensive. When we learn something new, we start with the principle: by looking at the DOM structure in the VUE project, we can see: By adding a unique mark on the DOM structure and CSS style, ensure that the unique, to achieve style privatization, does not pollute the global role (principle) to achieve the privatization of components, not global caused style pollution, said that the current style attribute only belongs to the current module although convenient but we need to be careful with, Because when we use common components, it creates a lot of difficulty, and it increases the difficulty. The component whose scoped attribute is added does the following to prevent global contamination: Data-v-469af010 attribute unique Add a field equivalent to the “non-repeating attribute” after each style selector of the scoped component to achieve a similar effect to the “scope”. If there are other components inside the component, Only tags in the outermost component are assigned unique attribute fields, not components referenced within the component (note)

However, scoped is good but should be used sparingly. In principle, scoped can achieve the effect of privatized components and “scoped” style setting. In fact, it only adds a data attribute to all the tags of the component whose scoped attribute is set, and adds the same field to the end of the tag selector to achieve the unique effect. However, if the component also references other components, problems like the following can occur: The parent component does not have the scoped property, and the child component has the scoped property. The parent component cannot manipulate the style of the child component (for reasons we can see in principle). Although we can set the style globally with the tag selector of this class, it will affect other components whose parent component has the scoped property, and the child component does not. The parent component also cannot set the child component style, because all tags of the parent component will carry the data-V-469AF010 unique flag, but the child component will not carry this unique flag attribute, the same as 1, although we can set the style globally through the tag selector of this class, but it will affect the other component parent component. In the same way, you can’t set styles that increase code