共计 718 个字符，预计需要花费 2 分钟才能阅读完成。
先科普下 setData 做的事情：
在数据传输时，逻辑层会执行一次 JSON.stringify 来去除掉 setData 数据中不可传输的部分，之后将数据发送给视图层。同时，逻辑层还会将 setData 所设置的数据字段与 data 合并，使开发者可以用 this.data 读取到变更后的数据。
因此频繁调用，视图会一直更新，阻塞用户交互，引发性能问题。
但频繁调用是常见开发场景，能不能频繁调用的同时，视图延迟更新呢？
参考 Vue，我们能知道，Vue 每次赋值操作并不会直接更新视图，而是缓存到一个数据更新队列中，异步更新，再触发渲染，此时多次赋值，也只会渲染一次。
于是有网友就给出了这套方案的实现方法：
let newState = null
const asyncSetData = ({
vm,
newData,
}) => {
newState = {
…newState,
…newData,
}
Promise.resolve().then(() => {
if (!newState) return
vm.setData({
…newState,
})
newState = null
})
}
由于异步代码会在同步代码执行完后执行，因此多次 asyncSetData 的 newData 都会缓存在 newState 中，并在异步的 promise.then 中只 setData 一次。
但这个方案会带来新的问题：就是同步代码会阻塞页面的渲染。
同步代码会阻塞页面的渲染的问题其实在浏览器中也存在，但在小程序中，由于是逻辑、视图双线程架构，因此逻辑并不会阻塞视图渲染，这是小程序的优点，但在这套方案将会丢失这个优点。
鱼与熊掌不可兼得也！
参考资料
终极蛇皮上帝视角之微信小程序之告别 setData, 佯真愚, 2018 年 08 月 12 日
