life cycle of polymer1.0 components

In order of triggering:

created: It is called when the component is new, and it is triggered at the earliest. At this time, the properties of the component cannot be accessed, but I don't know why it will be executed directly through HTML. It may be instantiated internally.

ready: It will be called when the subcomponents or native DOM components that depend on the component are loaded successfully, so that the local DOM is initialized after your component is configured at one time.

factoryImpl: will only be called when components are created using new ElementClass(), which happens after ready

attached: Triggered when the component is added to the parent component (when displayed on the page), only fired once.

attributeChanged: Triggered when an attribute is set by the parent component, only triggered when the attribute is set using the setAttribute() method, called when the attribute of an element changes.

detached: Triggered when the parent component removeChild.

Reference: Open the pit, write some Polymer 1.0 tutorial part 4 - the life cycle of components

created和ready

template.html

<dom-module id="my-element"></dom-module>
<script>
    Polymer({
      is: 'my-element',
      created: function() {
        console.log('created');
      }
    });
</script>

index.html

<my-element><my-element/>

I've tried it twice, but I still don't get it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 这是一个基础版的兼容库 -->
    <script src="webcomponents-lite.min.js"></script>
    <!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->
    <!-- <link rel="import" href="./template/template.html"> -->
    <link rel="import" href="polymer-1.7.0/polymer.html">
</head>
<body>
    <my-hello></my-hello>
    <script>
        Polymer({
            is:'my-hello',
            properties:{
                msg:{
                    type:String,
                    value:'why?'
                }
            },
            ready:function(){
                console.log(this.msg + ' ready');
            },
            created:function(){
                console.log(this.msg + ' created');
            }
        })
    </script>
</body>
</html>

It is true that attributes cannot be accessed in the created phase.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 这是一个基础版的兼容库 -->
    <script src="webcomponents-lite.min.js"></script>
    <!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->
    <!-- <link rel="import" href="./template/template.html"> -->
    <link rel="import" href="polymer-1.7.0/polymer.html">
</head>
<body>
    <my-hello>
        <div>什么啊？</div>
    </my-hello>
    <script>
        var hello = Polymer({
            is:'my-hello',
            properties:{
                msg:{
                    type:String,
                    value:'why?'
                }
            },
            // 组件加载完毕会执行
            ready:function(){
                console.log(this.msg + ' ready');
            },
            // 自定义元素被创建会执行
            created:function(){
                console.log(this.msg + ' created');
            },
            factoryImpl:function(){
                console.log(this.msg + ' factoryImpl');
            },
            // 组件显示在页面的时候会执行
            attached:function(){
                console.log(this.msg + ' attached');

                // factoryImpl会被执行
                new hello();

                // 设置属性 会执行attributeChanged方法
                this.setAttribute('msg',this.msg);

                // 删除组件 会执行detached方法
                console.log('removeChild');
                document.body.removeChild(this);
            },
            attributeChanged:function(){
                console.log(this.msg + ' attributeChanged');
            },
            detached:function(){
                console.log(this.msg + ' detached');
            }
        })
    </script>
</body>
</html>

The result is as follows:

Some problems can be seen here, that is, if you add components manually, then Polymer will help you create them internally. If you add them manually and use JS new, they will be executed twice.

life cycle of polymer1.0 components

Guess you like