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

逃离我推掉我的手 2021-09-16 06:14 309阅读 0赞

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

### 组件的生命周期 ###

***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: {
    
      }
    })

[SelectorQuery]: https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html