【面试】面试官：说说scoped的原理

每一个vue组件是相互独立的。

在每一个组件里，都可以进行布局，如果不在style里加入scoped，它就会影响到所有的组件。

如果想写样式，只在本组件内生效，就要加scoped。

作用：让样式在本组件内生效，不影响其他组件。

原理:给节点新增自定义属性，然后css根据属性选择器添加样式。

1.当父组件无scoped属性,子组件带有scoped,子组件所有标签会套上子组件的data-v-hash属性,

2.当父组件有scoped属性,子组件无scoped.父组件所有标签和子组件的最外层标签有父组件的data-v-hash属性.

3.父子组件都有scoped,父组件的所有标签有父组件的data-v-hash属性,子组件的所有标签有子组件的data-v-hash属性,这时子组件的最外层标签就会同时套上父组件和子组件的data-v-hash属性