數據監聽器(qì)可(kě)以用于監聽和(hé)響應任何屬性和(hé)數據字段的變化，通(tōng)常會在監聽到某個(gè)值的改變時去操作data中(zhōng)的其它屬性值。

在自定義組件中(zhōng)使用監聽器(qì)：

Component({
  properties:{//監測傳過來的屬性
    num: {
      type: String,
      observer: function(newVal, oldVal) {
         console.log('properties-num', newVal)
      }
    },
    person: {
      type: Object,
      observer: function(newVal, oldVal) {
        // console.log('properties-person', newVal)
      }
    }
  },
  data: {
    aloneVal: 0,
    oneVal: null,
    twoVal: null
  },
  observers: {//能夠監測到props和(hé)data中(zhōng)的
    // 監聽全部 setData，每次 setData 都觸發，一般用不到 '**' 監聽全部
    '**':function (val) {
      console.log('**所有的setData變化：', val) // 此時返回的 val 值是一個(gè)包含所有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)
    },
    // 監聽子(zǐ)組件中(zhōng)單個(gè)數據的變化
    'aloneVal' (val) {
      console.log('aloneVal', val)
    },
    // 監聽子(zǐ)組件中(zhōng)多個(gè)數據的變化
    'oneVal, twoVal' (val1, val2) {
      console.log('oneVal', val1)
      console.log('twoVal', val2)
    }
  },
  // 在組件在視圖層布局完成後執行
  ready() {
    setInterval(()=>{
    this.setData({
      aloneVal:this.aloneVal+1
      })
    },1000)
  },
})

實現自定義組件的計算屬性computed功能需要利用自定義組件擴展behavior.js
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/extend.html

新建一個(gè)behavior.js文(wén)件

// behavior.js
module.exports = Behavior({
  lifetimes: {
    created() {
      this._originalSetData = http://www.wxapp-union.com/this.setData // 原始 setData
      this.setData = this._setData // 封裝後的 setData
    }
  },
  definitionFilter(defFields) {
    const computed = defFields.computed || {}
    const computedKeys = Object.keys(computed)
    const computedCache = {}

    // 計算 computed
    const calcComputed = (scope, insertToData) => {
      const needUpdate = {}
      const data = defFields.data = defFields.data || {}

      for (let key of computedKeys) {
        const value = computed[key].call(scope) // 計算新值
        if (computedCache[key] !== value) needUpdate[key] = computedCache[key] = value
        if (insertToData) data[key] = needUpdate[key] // 直接插入到 data 中(zhōng)，初始化時才需要的操作
      }

      return needUpdate
    }

    // 重寫 setData 方法
    defFields.methods = defFields.methods || {}
    defFields.methods._setData = function (data, callback) {
      const originalSetData = this._originalSetData // 原始 setData
      originalSetData.call(this, data, callback) // 做 data 的 setData
      const needUpdate = calcComputed(this) // 計算 computed
      originalSetData.call(this, needUpdate) // 做 computed 的 setData
    }

    // 初始化 computed
    calcComputed(defFields, true) // 計算 computed
  }
})

在組件中(zhōng)使用:

const beh = require('./behavior.js')
Component({
  behaviors: [beh],
  data: {
    a: 0,
  },
  computed: {
    b() {
      return this.data.a + 100
    },
  },
  methods: {
    onTap() {
      this.setData({
        a: ++this.data.a,
      })
    }
  }
})

在頁面中(zhōng)使用數據監測：

1，在app.js中(zhōng)添加以下(xià)代碼：

//app.js
App({

  setWatcher(page) {
    let data = http://www.wxapp-union.com/page.data; // 獲取page 頁面data
    let watch = page.watch;
    for(let i in watch){
      let key = i.split('.'); // 将watch中(zhōng)的屬性以'.'切分成數組
      let nowData = http://www.wxapp-union.com/data; // 将data賦值給nowData
      let lastKey = key[key.length - 1];
      let watchFun = watch[i].handler || watch[i]; // 兼容帶handler和(hé)不帶handler的兩種寫法
      let deep = watch[i].deep; // 若未設置deep,則為undefine
      this.observe(nowData, lastKey, watchFun, deep, page); // 監聽nowData對象的lastKey
      }
  },

    observe(obj, key, watchFun, deep, page) {
      let val = obj[key];
      // 判斷deep是true 且 val不能為空 且 typeof val==='object'（數組内數值變化也需要深度監聽）
      if (deep && val != null && typeof val === 'object') {
      for(let i in val){
      this.observe(val, i, watchFun, deep, page); // 遞歸調用監聽函數
    }
  }
    let that = this;
    Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: true,
    set: function (value) {
      // 用page對象調用,改變函數内this指向,以便this.data訪問(wèn)data内的屬性值
      watchFun.call(page, value, val); // value是新值，val是舊值
      val = value;
      if (deep) { // 若是深度監聽,重新監聽該對象，以便監聽其屬性。
       that.observe(obj, key, watchFun, deep, page);
      }
    },
    get: function () {
     return val;
    }
    })
  }

})

2，在頁面index.js中(zhōng)使用：

// pages/index/index.js
import initComputed from '../../lib/wxComputed.min.js'// 引入computed屬性方法
const app = getApp()
Page({
data:{
  createProcesDescribe:'',
  createProcesName: '',
  lastName: 'aa',
  firstName: 'bb',
},

   onLoad(option){//監聽頁面加載
    app.setWatcher(this)// 設置監聽器(qì),建議在onload裡設置
    
    initComputed(this)//執行computed屬性初始化
   },
   
  // computed屬性
  computed: {
    // 這是一個(gè)函數，返回值為此計算屬性的值
    fullName() {
        return this.data.lastName + '-' + this.data.firstName
    },
  },
  
  //watch監聽data裡的數據
   watch:{
    createProcesName:{
      handler(newVal,oldVal){
        console.log(newVal,oldVal)
      }
    },
    createProcesDescribe:{
      handler(newVal,oldVal){
        console.log(newVal,oldVal)
    },
  },
 })

總結：在自定義組件中(zhōng)直接使用observers其實跟Vue框架中(zhōng)使用watch作用一樣，如(rú)果在自定義組件中(zhōng)使用computed屬性功能則需要引入組件擴展。在頁面中(zhōng)使用watch也需要自己在外部添加監聽方法，然後在需要監聽的頁面中(zhōng)引入監聽器(qì)，并設置監聽器(qì)，如(rú)果在頁面中(zhōng)需要使用j計算屬性computed也需要在頁面中(zhōng)引入該功能文(wén)件。