小程序《旧岛》项目笔记(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: {

  }
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CHH5431

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值