本文链接： https://blog.csdn.net/milugloomy/article/details/101127952

原因

在上一篇《微信小程序实现数据侦听器，类似vue的watch，替代Observer》中，我们实现的watch功能，但使用起来还是有点麻烦。能不能像Vue那样直接写个watch属性呢？当然可以，这就是写这一片博客的目的。我们要实现以下几个目标：

支持侦听对象的变化，侦听对象的子属性的变化，支持立即执行
少量几行代码即可引入，不修改之前代码结构，不需要每个页面都引入
使用方式和vue的watch一样

在组件和Page中实现

微信小程序实现watch功能，有如下三个关键点：

侦听子属性变化时，watch的key类似于'a.b.c.d'，需要解析这个key，在下面的parseKey函数中实现。
watch功能要在组件的attached生命周期和page的onLoad生命周期中实现。一个原因是要获取this，另一个原因是在Component初始化时，有data和properties两个可以定义数据的地方。而在created生命周期中，会将properties中的属性复制到data中。所以我们在created的下一阶段，attached只用侦听data中的属性变化，而不用侦听data和properties两个对象的属性变化，减少实现复杂度。
watch的原理是使用Object.defineProperty来侦听值的变化。

新建一个watch.js文件，内容如下：

function initComponent() {
  let oldComponent = Component
  Component = function(obj) {
    let oldAttached = obj.attached || function() {}
    // 在attached生命周期中实现watch功能
    obj.attached = function() {
      obj.watch && initWatch.call(this, obj.watch)
      oldAttached.call(this, ...arguments)
    }
    return oldComponent(obj)
  }
}
function initPage() {
  let oldPage = Page
  Page = function(obj) {
    let oldOnLoad = obj.onLoad || function() {}
    obj.onLoad = function() {
      obj.watch && initWatch.call(this, obj.watch)
      oldOnLoad.call(this, ...arguments)
    }
    return oldPage(obj)
  }
}
function initWatch(watch) {
  let that = this
  // 如果obj有watch这个属性，遍历watch对象
  for (let key in watch) {
    //临时对象，tmpObj由三部分组成，obj，key，value；obj={key:value}
    let tmpObj = parsePath(key)
    // 如果watch的key在data或者properties中有定义，就监控它的变化
    if (tmpObj && tmpObj.key) {
      // 暂存数据，用于get
      let tmpData = tmpObj.value
      // watch的回调
      let cb = watch[key]
      let immediate = false
      if (typeof cb === 'object') { // watch: {xxx: {immediate: true, handler: function(){}}}
        immediate = cb.immediate
        cb = cb.handler
      }
      // 如果immediate为true，先执行一次侦听变化的方法
      if (immediate) {
        cb.call(that, tmpData)
      }
      // 配置watch
      Object.defineProperty(tmpObj.obj, tmpObj.key, {
        set: function(newVal) {
          //保存旧值，供watch侦听器用
          let oldVal = tmpData
          //修改当前值，也就是this.data.xxx的值改变，会调用下面的get方法即时取到
          tmpData = newVal
          // 数据变化时，再执行一次方法
          if (oldVal !== newVal) {
            cb.call(that, newVal, oldVal)
          }
        },
        get: function() {
          return tmpData
        }
      })
    }
  }
  function parsePath(key) {
    let parent = that.data
    let obj = that.data
    let segments = key.split('.')
    for (var i = 0; i < segments.length; i++) {
      if (obj.hasOwnProperty(segments[i]) === false) {
        return null
      }
      parent = obj
      obj = obj[segments[i]]
    }
    return {
      obj: parent, //defineProperty的第一个参数
      key: segments[i - 1], //defineProperty的第二个参数
      value: obj //值
    }
  }
}

以上，主要关键代码都已经添加注释。

引入

一句话引入，在app.js中引入watch.js

import './utils/watch.js'

使用方式

使用方式和Vue一样，三种watch使用方式的示例代码如下：

Page({
  data: {
    patient: null,
    patientList: null
  },
  onLoad: function(options) {
    app.formRequest('/chronic/selectPatientList').then(res => {
      this.setData({
        patientList: res.body.list
      })
    })
  },
  watch:{
    //watch对象
    patientList: function(val) {
      console.log('patientList变化了')
      console.log(val)
    },
    //watch对象，立即执行
    patient: {
      immediate: true,
      handler: function(val){
        console.log('patient变化了')
        console.log(val)
      }
    },
    //watch对象的子属性
    'patient.patientId': function(val) {
      console.log('patientId变化了')
      console.log(val)
    },
  }
})

总结

这篇，我们在小程序的Page和Component中实现了watch功能，且实现了开头的三个目标。

微信小程序实现数据侦听器watch，包含子属性的watch

原因

在组件和Page中实现

使用方式

总结

猜你喜欢