内容摘要：本文转载自微信公众号「前端下午茶」，作者SHERlocked93 。转载本文请联系前端下午茶公众号。鉴于在下使用微信小程序开发时使用 setData 的蹩脚体验，开发了个库函数 wx-updata，项

本文转载自微信公众号「前端下午茶」，微信作者SHERlocked93 。小程序转载本文请联系前端下午茶公众号。什放使用 

鉴于在下使用微信小程序开发时使用 setData 的微信蹩脚体验，开发了个库函数 wx-updata，小程序项目上线之后，什放使用我把这个自用的微信库函数整理放到 Github 上开源出来 wx-updata，这个库函数在开发的小程序时候对我很有帮助，希望也可以帮到大家 ?什放使用?

如果大家在使用中遇到了问题，可以给我提 pr，微信提 issue，小程序一起来改善小程序开发体验加油～

wx-updata 版本 0.0.10 Github 地址：https://github.com/SHERlocked93/wx-updata 小程序代码片段预览地址：https://developers.weixin.qq.com/s/CcXdO1mc73jD 小程序代码片段代码地址：https://github.com/SHERlocked93/wx-updata-demo

1. setData 不方便的什放使用地方

你在使用 setData 的时候，是微信不是有时候觉得很难受，举个简单的小程序例子：

// 你的 data data: {      name: 蜡笔小新,     info: {  height: 140, color: 黄色 } } 

如果要修改 info.height 为 155，使用 setData 要怎么做呢：

// 这样会把 info 里其他属性整不见了 this.setData({  info: {  height: 155 } }) // 你需要取出 info 对象，什放使用修改后整个 setData const {  info } = this.data info.height = 155 this.setData({  info }) 

似乎并不太复杂，但如果 data 是个很大的对象，要把比较深且不同的对象、数组项挨个改变：

data: {      name: 蜡笔小新,     info: {          height: 140, color: 黄色,         desc: [{  age: 8 }, 最喜欢大象之歌, 靓仔, {  dog: 小白, color: 白色 }]     } } 

比如某个需求，需要把 info.height 改为 155，同时改变 info.desc 数组的第 0 项的服务器托管 age 为 12，第 3 项的 color 为灰色呢?

// 先取出要改变的对象，改变数字后 setData 回去 const {  info } = this.data info.height = 155 info.desc[0].age = 12 info.desc[3].color = 灰色 this.setData({  info }) // 或者像某些文章里介绍的，这样可读性差，也不太实用 this.setData({      info.height: 155,     info.desc[0].age: 12,     info.desc[3].color: 灰色 }) 

上面这两种方法，是我们平常小程序里经常用的，和其他 Web 端的框架相比，就很蹩脚，一种浓浓的半成品感扑面而来，有没有这样一个方法：

this.upData({      info: {          height: 155,         desc: [{  age: 12 }, , , {  color: 灰色 }]     } }) 

这个方法会帮我们深度改变嵌套对象里对应的属性值，跳过数组项里不想改变的，只设置我们提供了的属性值、数组项，岂不是省略了一大堆蹩脚的代码，而且可读性也极佳呢。

这就是为什么我在上线的项目中使用 wx-updata，而不是 setData

2. wx-updata 的优点

支持 setData 对象自动合并，香港云服务器不用写蹩脚的对象路径了 ?? 支持对象中嵌套数组，数组中嵌套对象; 如果数组的某个值你不希望覆盖，请使用数组空位来跳过这个数组项，比如 [1,,3] 这个数组中间就是数组空位; 如果数组空位你的 Eslint 报错，可以使用 wx-updata 提供的 Empty 来代替：[1, Empty, 3]

3. wx-updata 安装

你也可以直接把 dist 目录下的 wx-updata.js 拷贝到项目里使用

使用 npm、yarn 安装方式：

$ npm i -S wx-updata # or $ yarn add wx-updata 

然后：

把微信开发者工具面板右侧的 详情 - 本地设置 - 使用npm模块 按钮打开;

点击微信开发者工具面板工具栏的 工具 - 构建npm;

构建后成功生成 miniprogram_npm 文件夹就可以正常使用了

4. wx-updata 使用方法

使用方式一

可以使用直接挂载到 Page 上的方式，这样就可以在 Page 实例中像使用 setData 一样使用 upData 了

// app.js import {  updataInit } from ./miniprogram_npm/wx-updata/index  // 你的库文件路径 App({      onLaunch() {          Page = updataInit(Page, {  debug: true })     } }) // 页面代码中 this.upData({      info: {  height: 155 },     desc: [{  age: 13 }, 帅哥],     family: [, , [, , , {  color: 灰色 }]] }) 

使用方式二

有的框架可能在 Page 对象上进行了进一步修改，直接替换 Page 的方式可能就不太好了，wx-updata 同样暴露了工具方法，用户可以在页面代码中直接使用工具方法进行处理：

// 页面代码中 import {  objToPath } from ./miniprogram_npm/wx-updata/index  // 你的库文件路径 Page({      data: {  a: {  b: 2}, c: [3,4,5]},     // 自己封装一下     upData(data) {          return this.setData(objToPath(data))     },     // 你的方法中或生命周期函数     yourMethod() {          this.upData({  a: {  b: 7}, c: [8,,9]})     } }) 

使用 Empty 代替数组空位

可以使用 wx-updata 提供的 Empty 来代替数组空位，由于 Empty 本质上是一个 Symbol，所以只能使用 wx-updata 导出的，而不能自己新建。

// 页面代码中 import {  Empty } from ./miniprogram_npm/wx-updata/index this.upData({      info: {  height: 155 },     desc: [{  age: 13 }, 帅哥],     family: [Empty, Empty, [Empty, Empty, Empty, {  color: 灰色 }]] }) 

5. wx-updata 相关 API

Page.prototype.upData(Object data, Function callback)

data：你希望设置的 data callback：跟 setData 第二个参数一样，引起界面更新渲染完毕后的云南idc服务商回调函数

updataInit(Page, config)

Page：页面对象，需要在 app.js 中调用; config：若提供配置参数 { debug: true }，会将路径化后的 data 打印出来，帮助用户进行调试;

objToPath(Object data)

data：你希望设置的 data 对象

原文链接：https://mp.weixin.qq.com/s/QwCnT335M2P_3NIQhY8XZg