微信小程序 数据与界面渲染异步问题解决：数据监听事件

界面渲染在数据加载之前，出现优先渲染界面，而数据加载完后，界面不再渲染。
通过数据监听事件，当data中数据被改变时，进行监听，并进行数据渲染。

swatch事件监听

新建一个swatch.js的工具类，源码如下：

// watch.js
 
const observe = (obj, key, watchFun, deep, page) => {
    let oldVal = obj[key]
    // 如果监听对象是object类型并且指定deep（深度监听）
    if (oldVal !== null && typeof oldVal === 'object' && deep) {
      // 递归子集，依次执行observe()
      Object.keys(oldVal).forEach(item => {
        observe(oldVal, item, watchFun, deep, page)
      })
    }
    // 使用Object.defineProperty()劫持数据的写操作，在监听对象改变后执行传入的watchFun
    Object.defineProperty(obj, key, {
      configurable: true,
      enumerable: true,
      set(value) {
        if (value === oldVal) return
        watchFun.call(page, value, oldVal)
        oldVal = value
      },
      get() {
        return oldVal
      }
    })
  }
   
  export const setWatcher = (page) => {
    // 页面里的data字段
    const data = page.data
    // 页面里的watch字段
    const watch = page.watch
    // 对watch里列举的每一个字段（需要监听的字段）执行observe()
    Object.keys(watch).forEach(key => {
      let targetData = data
      const targetKey = key
      // 支持deep深度监听，使用deep时需要配合handler使用，否则直接编写函数
      const watchFun = watch[key].handler || watch[key]
      const deep = watch[key].deep
      observe(targetData, targetKey, watchFun, deep, page)
    })
  }

在需要进行渲染的界面，进行数据监听

import {setWatcher} from '../../utils/watch.js'
onLoad(){
        setWatcher(this)
 },
watch: {
        shuju(val) {
           console.log('数据改变了')
        }
    },