微信小程序自定义组件深度监听，页面展示和隐藏时生命周期钩子

微信小程序自定义组件深度监听，页面展示和隐藏时生命周期钩子

Component({
	   /**
	   * 父组件的值
	   */
	  properties: {
	    phone: String
	  },
	  //页面展示和隐藏时生命周期钩子
	  pageLifetimes: {
	    show: function() {
	      // 页面被展示
	      console.log("页面被展示");
	    },
	    hide: function() {
	      // 页面被隐藏
	      console.log("页面被隐藏");
	
	    },
	    resize: function(size) {
	      // 页面尺寸变化
	      console.log("页面尺寸变化");
	    }
	  },
	  //监听方法修改data的值时
	  observes: {
	    // 监听num1和num2的变化 动态改变sum的值
	    // 记住num1和num2 在data里已经更新 下面就不许需要再更新！否则会死循环！
	    'num1,num2': (num1, num2) => {
	      this.setData({
	        sum: Number(num1) + Number(num2)
	      })
	    }
	  },
	  //能够监测到props和data中的 (深度监听)
	   observers: { 
	    // 监听全部 setData，每次 setData 都触发，一般用不到 '**' 监听全部
	     '**': function (val) {
	       console.log('**所有的setData变化：', val) // 此时返回的 val     值是一个包含所有data变量的对象
	    },
	   // 监听 properties 接收的值的变化
	   'num'(val) {
	     console.log('observers-num', val)
	   },
	   // 监听对象
	   'person'(val) {
	     console.log('observers-person', val)
	   },
	   // 监听对象的属性
	   'person.name'(val) {
	     console.log('observers-person.name', val)
	   },
	   // 监听子组件中单个数据的变化
	   'aloneVal'(val) {
	     console.log('aloneVal', val)
	   },
	   // 监听子组件中多个数据的变化
	   'oneVal, twoVal'(val1, val2) {
	     console.log('oneVal', val1)
	     console.log('twoVal', val2)
	   }
	   },
	  // 在组件在视图层布局完成后执行
	  ready() {
	    console.log("视图层布局完成")
	  },
	  //created 组件实例化，但节点树还未导入，因此这时不能用setData
	  //attached 节点树完成，可以用setData渲染节点，但无法操作节点
      //ready(不是onReady) 组件布局完成，这时可以获取节点信息，也可以操作节点
      //moved 组件实例被移动到树的另一个位置
      //detached 组件实例从节点树中移除
  })