zoukankan      html  css  js  c++  java
  • 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>',
                        }
                    }
                }
            },
        })
    </script>

    在上面的代码中,显示的文字是最里层的book,颜色为brown,但是如果shop节点的 style="background-color: white" 这句话去掉,颜色就是blue

    也就是说,一个毫不相关的背景颜色的改动,会影响到字体颜色。

    道理是这样的,组件节点的嵌套中,父组件在最后调用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覆盖。

  • 相关阅读:
    Ubunut16.04 安装 Theano+GPU
    ubuntu源与常用python配置pip源(win)、pip常用命令
    集群(heartbeat)搭建
    Linux下搭建企业共享目录方案之------samba
    LAMP的安装和注意事项
    Linux最小化安装,忘记安装开发工具的解决方法
    去掉Linux尖锐的提示音
    最小化安装CentOS7,没有ifconfig命令---yum search command_name搜索未知包名
    编译安装php-5.4.44
    configure: error: Please reinstall the libcurl distribution
  • 原文地址:https://www.cnblogs.com/chuliang/p/11751386.html
Copyright © 2011-2022 走看看