數(shù)據(jù)監(jiān)聽(tīng)器可以用于監(jiān)聽(tīng)和響應(yīng)任何屬性和數(shù)據(jù)字段的變化，通常會(huì)在監(jiān)聽(tīng)到某個(gè)值的改變時(shí)去操作data中的其它屬性值。

在自定義組件中使用監(jiān)聽(tīng)器：

Component({
  properties:{//監(jiān)測(cè)傳過(guò)來(lái)的屬性
    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: {//能夠監(jiān)測(cè)到props和data中的
    // 監(jiān)聽(tīng)全部 setData，每次 setData 都觸發(fā)，一般用不到 '**' 監(jiān)聽(tīng)全部
    '**':function (val) {
      console.log('**所有的setData變化：', val) // 此時(shí)返回的 val 值是一個(gè)包含所有data變量的對(duì)象
    },
    // 監(jiān)聽(tīng) properties 接收的值的變化
    'num' (val) {
      console.log('observers-num', val)
    },
    // 監(jiān)聽(tīng)對(duì)象
    'person' (val) {
      console.log('observers-person', val)
    },
    // 監(jiān)聽(tīng)對(duì)象的屬性
    'person.name' (val) {
      console.log('observers-person.name', val)
    },
    // 監(jiān)聽(tīng)子組件中單個(gè)數(shù)據(jù)的變化
    'aloneVal' (val) {
      console.log('aloneVal', val)
    },
    // 監(jiān)聽(tīng)子組件中多個(gè)數(shù)據(jù)的變化
    'oneVal, twoVal' (val1, val2) {
      console.log('oneVal', val1)
      console.log('twoVal', val2)
    }
  },
  // 在組件在視圖層布局完成后執(zhí)行
  ready() {
    setInterval(()=>{
    this.setData({
      aloneVal:this.aloneVal+1
      })
    },1000)
  },
})

實(shí)現(xiàn)自定義組件的計(jì)算屬性computed功能需要利用自定義組件擴(kuò)展behavior.js
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/extend.html

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

// 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 = {}

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

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

      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) // 計(jì)算 computed
      originalSetData.call(this, needUpdate) // 做 computed 的 setData
    }

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

在組件中使用:

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,
      })
    }
  }
})

在頁(yè)面中使用數(shù)據(jù)監(jiān)測(cè)：

1，在app.js中添加以下代碼：

//app.js
App({

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

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

})

2，在頁(yè)面index.js中使用：

// 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){//監(jiān)聽(tīng)頁(yè)面加載
    app.setWatcher(this)// 設(shè)置監(jiān)聽(tīng)器,建議在onload里設(shè)置
    
    initComputed(this)//執(zhí)行computed屬性初始化
   },
   
  // computed屬性
  computed: {
    // 這是一個(gè)函數(shù)，返回值為此計(jì)算屬性的值
    fullName() {
        return this.data.lastName + '-' + this.data.firstName
    },
  },
  
  //watch監(jiān)聽(tīng)data里的數(shù)據(jù)
   watch:{
    createProcesName:{
      handler(newVal,oldVal){
        console.log(newVal,oldVal)
      }
    },
    createProcesDescribe:{
      handler(newVal,oldVal){
        console.log(newVal,oldVal)
    },
  },
 })

總結(jié)：在自定義組件中直接使用observers其實(shí)跟Vue框架中使用watch作用一樣，如果在自定義組件中使用computed屬性功能則需要引入組件擴(kuò)展。在頁(yè)面中使用watch也需要自己在外部添加監(jiān)聽(tīng)方法，然后在需要監(jiān)聽(tīng)的頁(yè)面中引入監(jiān)聽(tīng)器，并設(shè)置監(jiān)聽(tīng)器，如果在頁(yè)面中需要使用j計(jì)算屬性computed也需要在頁(yè)面中引入該功能文件。