Life cycle of polymer1.0 component

In the order of triggering:

created: when a component is called by new, it is triggered at the earliest time. At this time, you cannot access the properties of the component, but you do not know why it can also be executed directly through HTML. It may be internally instantiated.

ready: when a component's internal dependent subcomponent or native DOM component is loaded successfully, it will be called to initialize the local DOM after one-time configuration of your component.

factoryImpl: called only when a component is created using the new ElementClass() method, after ready

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

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

detached: triggered when removed by the parent component.

Reference resources: Open a hole, write a lesson about Polymer 1.0 Part 4 -- the life cycle of components

created and 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/>

After two executions, I haven't understood.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- This is a basic compatible Library -->
    <script src="webcomponents-lite.min.js"></script>
    <!-- take rel Modified to import Another one can be introduced HTML,It will be executed -->
    <!-- <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's true that properties cannot be accessed in the created phase.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- This is a basic compatible Library -->
    <script src="webcomponents-lite.min.js"></script>
    <!-- take rel Modified to import Another one can be introduced HTML,It will be executed -->
    <!-- <link rel="import" href="./template/template.html"> -->
    <link rel="import" href="polymer-1.7.0/polymer.html">
</head>
<body>
    <my-hello>
        <div>What ah?</div>
    </my-hello>
    <script>
        var hello = Polymer({
            is:'my-hello',
            properties:{
                msg:{
                    type:String,
                    value:'why?'
                }
            },
            // When the component is loaded, it will execute
            ready:function(){
                console.log(this.msg + ' ready');
            },
            // Custom elements are created and executed
            created:function(){
                console.log(this.msg + ' created');
            },
            factoryImpl:function(){
                console.log(this.msg + ' factoryImpl');
            },
            // Components are executed when they are displayed on the page
            attached:function(){
                console.log(this.msg + ' attached');

                // factoryImpl will be executed
                new hello();

                // Setting an attribute executes the attributeChanged method
                this.setAttribute('msg',this.msg);

                // Deleting a component executes the detached method
                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 results are as follows:

We can see some problems here. That is to say, if you add components directly by hand, the Polymer will be created internally for you. If you add them manually and use JS new again, they will be executed twice.

Tags: Attribute

Posted on Thu, 26 Mar 2020 08:54:39 -0700 by cnperry