Vue.js 组件中的非范围样式在切换路由时仅应用一次

Vue.js提到

可以在同一组件中包括范围样式和非范围样式

我构建了，并使用了两个单文件组件，而不是示例中的字符串模板-渲染正如预期的那样

然后，我尝试在组件中应用范围样式和非范围样式。在我的第一个

<style scoped>
div {
    color: white;
    background-color: blue;
}
</style>

<style>
body {
    background-color: green;
}
</style>

div{
颜色：白色；
背景颜色：蓝色；
}
身体{
背景颜色：绿色；
}

第二个呢

<style scoped>
div {
    color: white;
    background-color: red;
}
</style>

<style>
body {
    background-color: yellow;
}
</style>

div{
颜色：白色；
背景色：红色；
}
身体{
背景颜色：黄色；
}

这样做的目的是在选择特定路线时切换全身背景

限定范围的

样式正常-它们根据路线而变化

非范围的则没有（屏幕截图来自Chrome开发工具）：


在初始应用程序加载（尚未路由）时，背景为白色（这是正常的-这是默认背景，并且没有用于
/
的路由）
选择管线时，正确应用主体的样式（例如，从第一个组件开始，
绿色
）



当切换路由并加载第二个组件时，背景将更改为新颜色，从Chrome开发工具中可以看出，
background color
的当前样式被覆盖。正确呈现所有其他组件元素（内容和范围样式）



进一步的开关会保持相同的背景（同样，相关组件的其他元素也会正确呈现）。Chrome开发工具没有变化（上面的最后一个视图没有变化）

换句话说，看起来样式是堆叠的，以前覆盖的属性没有更新这是预期的行为吗？
我为此打开了一个对话框，结果是预期的行为。报告评论摘要如下：

:

是的，这是意料之中的。Vue（或者更确切地说，webpack）不插入和
如你所想，删除这些样式。它们被注射到大脑中
组件渲染后的头部，且从未移除

一种常见的模式是将所有CSS extarct到中的单个.CSS文件中
生产，这将有相同的结果

我对问题的总结：


最初（没有路由，没有渲染组件）没有注入任何内容
第一个组件在route switch上渲染，其
样式将被注入

第二个组件在route switch上呈现，其
样式
被注入并覆盖上一个
样式
进一步的路由开关不会注入任何内容，因为每个组件都已渲染一次。因此，最后使用的
样式保持为权威样式


因此，我将转而将
主体
类绑定到当前组件的
数据
啊，我很抱歉。我设置了一些调试点并逐步进行了调试，Vue根本没有修改
body
的属性。在查看源代码后，它似乎显式地侦听了
body
的子项，因此
body
不会看到这些更改。这似乎符合Vue的理念，即您不应该在Vue的应用程序容器之外使用它做任何事情。我删除了我以前的评论，以免在兔子洞的旅程中误导其他人。@Bluefish:不用担心，我也删除了我的评论。非作用域样式被明确设置为修改容器的父级。（我也将删除此注释）我的意思是，即使范围样式也不会修改
body
——到目前为止，我已经尝试了几十种不同的想法，并且似乎没有将属性应用到
body
。因此，我的假设是，此
功能仅适用于vue应用程序，因此
body
超出了该范围。我相信我们在这里看到的多重
身体
风格只是未定义的行为。在Vue的github上打开一个问题听起来是一个很好的选择。@Thebluefish:我用Vue容器（而不是
body
）进行了测试-同样的问题。如果一两天内没有反馈，我会提交一份bug报告。