vue 局部样式原理

Vue的局部样式原理主要是通过Vue的单文件组件（.vue文件）来实现的。

在单文件组件中，可以在`<style>`标签中使用`scoped`属性来指定样式的作用范围，即将样式限制在当前的组件内。

使用`scoped`属性后，Vue会为每个组件生成一个唯一的属性作为样式选择器，通过将该属性添加到组件中的元素上，实现了样式的局部化。这样，即使在不同的组件中使用了相同的类名，样式也不会冲突。

例如：

<template>
  <div class="container">
    <h1>我是一个局部样式</h1>
  </div>
</t emplate>

<style scoped>
.container {
  background-color: red;
}
  
h1 {
  color: blue;
}
</style>

上述代码中，`.container`样式和`h1`样式只对当前的组件起作用，不会影响其他组件中的相同类名或标签。

这种方式使得样式的维护更加简洁和清晰，不容易产生样式冲突，提高了代码的可维护性和复用性。

需要注意的是，使用`scoped`属性会给每个组件中的元素添加额外的属性选择器，可能会增加CSS选择器的权重。当样式嵌套层级过多时，可能会遇到样式覆盖的问题，可以通过使用`/deep/`或`>>>`来穿透父级限制。

总之，Vue的局部样式原理通过为组件生成唯一的样式选择器，限制样式的作用范围，实现了样式的局部化，提高了样式的可维护性和复用性。