Vue 源码之 updateStyle
Posted chuliang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 源码之 updateStyle相关的知识，希望对你有一定的参考价值。
创建周期和更新周期中，都会用到，以创建周期为例(更新周期的道理是一样的)
在组件节点嵌套的情况下，从嵌套的最里端开始，每一个组件在创建的时候都会调用。逻辑是先递归收集当前组件子组件style的属性并合并覆盖，在收集当前组件style的属性并合并，在递归收集父组件并合并。
这样会出现一个问题如下：
<body>
<div id="app">
<shop style="background-color: white">app</shop>
</div>
</body>
<script>
new Vue ({
el: ‘#app‘,
components: {
shop: {
template: ‘<book style="color: blue">shop</book>‘,
components: {
book: {
template: ‘<div style="color: brown">book</div>‘,
}
}
}
},
})
在上面的代码中，显示的文字是最里层的book，颜色为brown，但是如果shop节点的 style="background-color: white" 这句话去掉，颜色就是brown
也就是说，一个毫不相关的背景颜色的改动，会影响到字体颜色。
道理是这样的，组件节点的嵌套中，父组件在最后调用updateStyle，会覆盖之前子组件的updateStyle方法中对真实节点style的更改，style="background-color: white"这句话存在的话，根节点在生成shop节点实例的过程中调用updateStyle方法，依次递归收集book节点和div节点的属性并合并，所以此时是先给color赋值blue，再赋值brown，当然如果此时shop节点的color属性有值，根据上面说的原则，会再进行覆盖，不过这里只有背景颜色，没有字体颜色，所以用的是brown。
把style="background-color: white"这句话去掉之后，因为shop节点没有staticStyle和style，所以进入updateStyle之后会直接返回，实际上起作用的父节点是book节点，那么先递归调用子节点的brown，再用blue覆盖。
以上是关于Vue 源码之 updateStyle的主要内容，如果未能解决你的问题，请参考以下文章