小程序《旧岛》项目笔记（7）-组件的生命周期与内存泄漏

组件的生命周期与内存泄漏

组件的生命周期

created  =>  组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用 setData

attached  =>  组件生命周期函数，在组件实例进入页面节点树时执行

ready  =>  组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）

moved  =>  组件生命周期函数，在组件实例被移动到节点树另一个位置时执行

detached  =>  组件生命周期函数，在组件实例被从页面节点树移除时执行

内存泄漏

在实际的开发中，我们通常会遇到，需要将小于10的数字前面添加0的处理，如下：

// components/epsoide/epsoide.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    index: {
      type: Number,
      observer: function(newVal, oldVal, changedPath) {
        console.log(newVal, oldVal, changedPath);
        let val = newVal < 10 ? '0' + newVal : newVal;
        this.setData({
          index: val
        })
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    year: 0,
    month: ''
  },
  attached: function() {},
  /**
   * 组件的方法列表
   */
  methods: {

  }
})

其中，properties 是组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段，type 表示属性类型、value 表示属性初始值、observer 表示属性值被更改时的响应函数。

代码编写之后，并没有实现相应的效果。经分析发现，将字符串转换为数值，小程序会将小于10数字强制进行去0处理。我们将类型  Number => String，发现存在无限递归调用，导致内存泄漏。

综上，建议不要在 observer 中修改自身属性。

代码修改如下：实现思路：既然不能在 observer 中修改组件的自身属性，那么我们修改 data 属性即可。

// components/epsoide/epsoide.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    index: {
      type: String,
      observer: function(newVal, oldVal, changedPath) {
        console.log(newVal, oldVal, changedPath);
        let val = newVal < 10 ? '0' + newVal : newVal;
        this.setData({
          _index: val
        })
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    year: 0,
    month: '',
    _index: ''
  },
  attached: function() {
    let date = new Date();
    let year = date.getFullYear();
    let monthIndex = date.getMonth();
    this.setData({
      year: year,
      month: this.data.months[monthIndex]
    })
  },
  /**
   * 组件的方法列表
   */
  methods: {

  }
})