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

2023-06-30 06:27| 来源: 网络整理| 查看: 265

界面渲染在数据加载之前，出现优先渲染界面，而数据加载完后，界面不再渲染。通过数据监听事件，当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('数据改变了') } },

【本文地址】

公司简介

联系我们

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

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