Wechat applets - basics takes you to understand the life cycle of applets (2)

Hello everyone , This is the seventh article in the applet series , The basic chapter is fast , I feel that after sharing the event system again, the basic chapter of the applet can be ended , The rest can be learned directly in the actual combat chapter ：
1.《 Wechat applet - The basic chapter 》 Take you to understand the routing system of the applet （ One ）
2.《 Wechat applet - The basic chapter 》 Take you to understand the routing system of the applet （ Two ）
3.《 Wechat applet - The basic chapter 》 Take you through the life cycle of an applet （ One ）
This article shares some basic knowledge about the life cycle of components in small programs , After introducing the foundation, we will actually develop a wechat applet project synchronously and open source , The tentative theme of the project is the original God's data station ~~~
–
Last , Please pay attention to , For collection , Please thumb up , This is a series of articles , Recommended column collection , It must be related to small programs , thank you ～

Preface

In the previous article, we shared the Application life cycle and Page lifecycle , The main content of this article is About the lifecycle of components in applets , We said before , Component development has become a standardized development mode in front-end development , So the component life cycle is naturally the top priority in component development , It can achieve a variety of desired functions in the loading of components ;
Read it patiently , You must get something ～

Reading object and difficulty

The difficulty of this article belongs to ： primary , fit Developers who are beginning to learn small programs , Through this paper , You can see that What are the life cycles of components in an applet , And how these lifecycles are used , What is the order of execution , The general mind map is as follows ：

Component lifecycle

What is the life cycle? We know from the previous article , except Application declaration cycle and Page lifecycle There's another one Component lifecycle , The original words introduced on the official website are ： It refers to some functions of the component itself , These functions are automatically triggered at special points in time or when encountering some special framework Events . It means , We know that the life cycle refers to the process from loading to destruction , This process can be divided into many stages , such as , Create a stage , Mount stage , Destruction stage, etc , At each stage, the program will throw an Callback function , This callback function , Life cycle ;
The component life cycle is described on the official website at the following address ： Component lifecycle

Introduce

First, let's take a look at the declaration cycles of components , After that, we will introduce in detail （ The data comes from the official website ）

Life cycle	Parameters	describe
created	-	Execute when the component instance has just been created
attached	-	Execute when the component instance enters the page node tree
ready	-	Execute after components are laid out in view layer
moved	-	Execute when the component instance is moved to another location in the node tree
detached	-	Execute when the component instance is removed from the page node tree
error	Object Error	2.4.1 newly added , Every time a component method throws an error

usage

The usage is simple , The reason why a secondary title should be listed separately is that the small program has an iteration in the process of development , Version is 2.2.3 edition , At present, both of them are supported , however Recommended lifetimes Writing ：

Component({
    
  // lifetimes The recommended way to write is 
  lifetimes: {
    
    attached: function() {
    
      //  Execute when the component instance enters the page node tree 
    },
    detached: function() {
    
      //  Execute when the component instance is removed from the page node tree 
    },
    detached: function(){
    
      //  Execute when the component instance is removed from the page node tree 
    }
  },
  //  Not recommended , Here's the old definition , Keep it right  <2.2.3  Compatibility of version Base Library 
  attached: function() {
    
    //  Execute when the component instance enters the page node tree 
  },
  detached: function() {
    
    //  Execute when the component instance is removed from the page node tree 
  },
  detached: function(){
    
    
  }
})

created

Execute when the component instance has just been created , Just write directly inside the component

// component/Button/button.ts
Component({
    
  /** *  A list of properties of a component  */
  properties: {
    
    size:{
    
      type:String,
      value:"normal",
    },
    type:{
    
      type:String,
      value:"default",
    },
    long:{
    
      type:Boolean,
      value:false,
    }
  },
  /** *  The initial data of the component  */
  data: {
    },
  /** *  A list of methods for a component  */
  methods: {
    },
  lifetimes:{
    
    created:function(){
    
      console.log("------  establish Button Trigger on component created ------")
      console.log(this.properties)
    },
  }
  
})

It is worth noting that , At this stage, because the component has just been created ,this.setData These functions do not work , In this life cycle , We can only get some basic values and process the data , Follow Page rendering related The content of Cannot be implemented in this lifecycle ;
We can do an experiment , With , Is roughly Button The displayed text comes from data The properties inside , We are created Change this value manually during the life cycle , see Button Whether the results on the will change

<!--component/Button/button.wxml-->
<button>{
    {
    name}}</button>

// component/Button/button.ts
Component({
    
  /** *  The initial data of the component  */
  data: {
    
    name:" Button "
  },
  lifetimes:{
    
    created:function(){
    
      console.log("------  establish Button Trigger on component created ------")
      this.setData({
    name:" Button create"})
    },
  }
})

give the result as follows ：

Obviously , The modification did not take effect , that Change the life cycle to do the control experiment

lifetimes:{
    
  created:function(){
    
    console.log("------  establish Button Trigger on component created ------")
    this.setData({
    name:" Button create"})
  },
  attached:function(){
    
    console.log("------  establish Button Trigger on component attached ------")
    this.setData({
    name:" Button attached"})
  }
}

It does work , Here's the picture

attached

After the component is initialized and mounted on the page, it will be triggered , If you are familiar with vue Words , and vue Of mounted More like , This stage is the stage we usually do initialization , And at this stage data It is also initialized to the value of the component ;
Let's give you an example , hypothesis button All text displayed on the must be added test written words , If we want to achieve , We can do that attached Gain... In the life cycle text written words , Splicing test after , again setData To the inside

  lifetimes:{
    
    created:function(){
    
      console.log("------  establish Button Trigger on component created ------")
      this.setData({
    name:" Button create"})
    },
    attached:function(){
    
      console.log("------  establish Button Trigger on component attached ------")
      this.setData({
    name:this.properties.text+' test'})
    }
  }

ready

Official statement ： Execute after components are laid out in view layer , To put it simply , The component is mounted on the page , And it will be triggered after the page is rendered ; In this life cycle, we usually deal with some content related to view operations ;
Let's give you an example , For example, we have a tree component , After the component is mounted , Then get some status data , these State data controls the expansion and contraction of nodes , This operation of updating the view , You can put it in ready In this life cycle ;
Use it in the same way as others

lifetimes:{
    
  ready:function(){
    
    console.log("------  establish Button Trigger on component ready ------")
    console.log(this.properties)
  }
}

moved

Official statement ： Execute when the component instance is moved to another location in the node tree , This life cycle uses relatively little , Some unexpected , Maybe I have less contact , At least up to now, I don't seem to have any specific implementation that needs to be realized by this life cycle ,github I found a component library on the and checked the usage of this life cycle , It turned out that there was no , This really embarrassed me , If a friend knows where to use this moved The place of , Please tell me , thank you …
In words of usage , equally , Relatively simple

lifetimes:{
    
  moved:function(){
    
    console.log("------  establish Button Trigger on component moved ------")
    console.log(this.properties)
  }
}

detached

Execute when the component instance is removed from the page node tree , To put it simply , This is this. ** Component destroyed ** Will be executed when , This is still used very frequently , Let's give you an example ：
There is one radioGroup Switching , Different buttons will be displayed according to different options , We know that wechat is also MVVM frame , When using conditional rendering , If the value is false, Then the component will not be displayed as destroyed , Destruction triggers this detached Life cycle function , Sometimes our components may need to execute some special events when they are destroyed , These special events can be placed in detached In this life cycle ;

lifetimes:{
    
  detached:function(){
    
    console.log("------  establish Button Trigger on component detached ------")
    console.log(this.properties)
  }
}

Execution order

Just look at the examples , Quite effective

The sequence can be seen as ：created -> attached -> ready, As for the others , It can only be triggered after the corresponding environment is triggered ;

Summary

In this paper , We know Components actually have a life cycle , Components trigger callback functions called lifecycles at different stages , The function is to facilitate users to process data or interface at different stages ;
The life cycle of a component consists of 6 individual , Namely ：created,attached,ready,moved,detached,error, The most common one is 3 individual ,attached,ready and detached, The functions are ：

• attached： Execute when the component instance enters the page node tree , That is commonly known as the mount stage , It's kind of like Vue Medium mounted Life cycle ;
• ready： Execute after components are laid out in view layer , The component is mounted on the page , And it will be triggered after the page is rendered ;
• detached： Execute when the component instance is removed from the page node tree , To put it simply , This is this. Component destroyed Will be executed when ;

Last , We introduced the execution sequence of components , Put aside the life cycle that requires special triggering conditions , The normal order is ：created -> attached -> ready;