【自定义组件】内部执行顺序问题分析

理解小程序自定义组件的执行流程，有助于后期开发，本人通过以下简易代码分析自定义组件的流程，结果如下：

 

第一步：创建组件：

created: function () {} 

 

第二步：属性默认值设置：

如果组件被调用时设置了组件属性，则初始化该属性的默认值。没有调用的属性不执行。

比如自定义组件user含有二个属性，分别是： memberName、memberSex

调用该组件时，只赋值了memberName，未赋值memberSex时，则只会执行memberName属性的observer函数，未赋值的memberSex属性的observer函数不会被执行。

<!-- 调用组件，以下只赋值了memberName，未赋值memberSex -->
<user memberName="wm218"/>

<!-- 以下代码是插件.js内，它会执行自定义组件的
  properties:{
    memberName:{
      type: String,
      value: '匿名',
      observer: function(oldVal, newVal, changePath){        
        // 如果组件设置了此属性，这部份会在created之后执行，这里newVal的值是匿名，而不是wm218!
      }
    },
   ...
-->

 

第三步： 将外部数据附加到属性

attached: function () {  }

在上一步中，并不能获取外部数据，即不能获取memberName的值为wm218，而在attached内可以通过：this.properties.memberName 获取外部值！

 

第四步：组件完成加载

ready: function(){ }

 

 

完整示例代码如下：

引用插件页代码：

<user memberName="wm218"/>

 

插件代码：com.js

<!-- com.js -->
Component({
  // 这里定义组件属性
  properties:{
    memberName:{
      type: String,
      value: '',
      observer: function(oldVal, newVal, changePath){        
        console.log('初始化memberName属性的默认值！', this.properties.memberName);
      }
    },
    memberSex: {
      type: String,
      value: '',
      observer: function (oldVal, newVal, changePath) {
        console.log('初始化memberSex属性的默认值！');
      }
    }
  },

  created: function () {
    console.log('组件被创建!', this.properties.memberName)
  },

  attached: function () {
    console.log('外部属性数据已被附加到properties内!', this.properties.memberName)
  },

  ready: function(){
    console.log('组件已完全加载！', this.properties.memberName)
  } 

});

 

日志输出结果：