微信小程序（组件中的使用）observer函数的应用

小程序observer函数的应用

需求是这样的 就是构建月份的组件中，月份小于10月的时候 显示的数字都是一个位数，需要转换成两位数，

比如8月份是8 ，那就要转换为08 ，同理可得 其他低于十月份的月份也是要这样做：

打开组件的js文件

接下来看下代码：

properties: {
      //月份的值
      index:{
          type:String,
          //不能在observer函数中去改变值,容易出现无限加载死循环!
          observer:function(newVal,oldVal,changedPath){
            let val = newVal < 10 ? '0'+newVal :newVal;//判断值如果是个位数前面补0 否则输出原来的值
            //更新数据
            this.setData({
              // index:val,val赋值 但是会导致递归加载 内存耗尽,所以在data中改变值
              num: val
            })
          }
      },
  }

这个函数的意义在于，当我们改变值的时候，微信小程序会主动调用这个函数，往这个函数传值，也就是这三个参数：

newVal,oldVal,changedPath  代码的讲解都在注释中。

需要注意的是，我们通过判断月份的值选择加0，并赋值到一个变量中，再把这个变量赋值到渲染到页面的变量时候，

不能和properties下的对象名字相同，为什么？因为不能在observer函数中去改变属性值，会出现无限递归的现象，也就是死循环

在该文件的data部分增加一个值：num

data: {

    num: '',//不能和上面的index相同,所以重新命名

}

选择重命名变量的下划线的写法！num: val  来区分开来

而且，index值的数据类型必须是字符串类型，为什么？因为如果是数字类型Number的话，代码会判断你是数字，就不会在数字前显示出0，会将0去掉，即使你做的判断没有问题！

完成这些代码，最后一步，就是把组件的页面的渲染值改掉 index改成 num

<text class="index">{{ num }}</text>