小程序中遇到observer函数引起的内存泄漏咋整？没想到这么简单

先来感受一下代码，报错报的简直扎心。

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    index: {
      //当这里为number 时，拼串的0会被忽视，所以不可以为Number
      type: String,
      //当我们改变了index的值时，小程序主动来调用observer
      //并传递三个值：新值、旧值、路径
      //observer里
      observer: function (newVal, oldVal, changedPath) {
        let val = newVal<10 ? "0" + newVal : newVal
        console.log(val)
        this.setData({
          index: val
        })
      }
      }
  },

  /**
   * 组件的初始数据
   */
  data: {
    year: "",
    month: ""
  },
  
  attached: function(){
    const months = {
      0 : "一月",
      1 : "二月",
      2 : "三月",
      3 : "四月",
      4 : "五月",
      5 : "六月",
      6 : "七月",
      7 : "八月",
      8 : "九月",
      9 : "十月",
      10 : "十一月",
      11 : "十二月",
    }
    let date = new Date
    let year = (date.getFullYear()).toString()
    let monthN = (date.getMonth()).toString()
    let monthS = months[monthN]
    this.setData({
      year: year,
      month: monthS
    })
  },

  /**
   * 组件的方法列表
   */
  methods: {
    
  }
})

复制代码

总结下原因：observer函数是在data发生改变时小程序主动调用的，在observer函数内setData时又再次改变了properties的值，observer函数再次调用，不停的循环……无限递归调用……于是内存耗尽。

那么问题来了，为啥type为Number时不会发生内存泄漏？

本质上就是因为properties值根本没变。当外部改变index值为A（假如），触发observer函数时，函数内部将传进来的值进行拼串后，由于值的类型设置为Number，拼串后的值0A会按照数字解析成A，所以进入函数内部后这个值绕了一圈还是没变，所以不会无限递归调用observer.

解决办法：

看到内存泄漏、递归这些字眼是不是就怕怕的？莫方（说给自己听）。

既然observer内部改变properties内部数据会产生问题，那么，咱们就不改变呗！曲线救国。在data里设置一个变量_index，把拼串后的值给到_index就好啦！注意在wxml中也要把绑定的数据改为{{_index}}。完美～

代码如下：

// components/epsoide/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    index: {
      //当这里为number 时，拼串的0会被忽视，所以不可以为Number
      type: String,
      //当我们改变了index的值时，小程序主动来调用observer
      //并传递三个值：新值、旧值、路径
      //observer里
      observer: function (newVal, oldVal, changedPath) {
        let val = newVal<10 ? "0" + newVal : newVal
        this.setData({
          _index: val
        })
      }
      }
  },

  /**
   * 组件的初始数据
   */
  data: {
    year: "",
    month: "",
    _index: ""
  },

  attached: function(){
    const months = {
      0 : "一月",
      1 : "二月",
      2 : "三月",
      3 : "四月",
      4 : "五月",
      5 : "六月",
      6 : "七月",
      7 : "八月",
      8 : "九月",
      9 : "十月",
      10 : "十一月",
      11 : "十二月",
    }
    let date = new Date
    let year = (date.getFullYear()).toString()
    let monthN = (date.getMonth()).toString()
    let monthS = months[monthN]
    this.setData({
      year: year,
      month: monthS
    })
  },

  /**
   * 组件的方法列表
   */
  methods: {
    
  }
})
复制代码

最后！！！千万不要尝试在observer函数里改变properties的值！！！