微信小程序 setdata 第1篇
在下面的示例中，演示了如何更改逻辑层的数据，在 wxml 中新增了一个按钮,用bindtap绑定了一个handleChangeName方法，触发按钮,改变 data 下的数据
而在逻辑层 JS
在上面的示例代码中，更改data下面的name字段值，使用的是setData方法，这个方法接收了一个参数，第一个参数是对象，这个Object 以 key: value 的形式表示，将 中的 key对应的值改变成 value
注意
这个key可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，，并且不需要在 中预先定义，但凡是页面要显示的变量数据，最好先挂载在data下初始化定义，然后在使用，也就是说在更改setData下的变量时，直接写key名就可以了的，不用写.属性，如下所示
setData接收第二个参数,是一个Function callback
执行结果
此结果说明这个setData方法是异步的,等待主线程任务做完了,然后在去执行第二个参数,回调异步函数
有时候,我们的接口数据类型是对象，并非是基本数据类型(number,boolean,string,null)，但由于业务需求，我们往往需要改变对象下的某个属性
在上面的代码中，的确可以更改person对象下的age属性，但是随之带来的问题是，person对象下除了age属性，其他属性都消失了。
微信小程序 setdata 第2篇
总而言之，这一节内容主要是围绕 setData 展开，包括双线程的渲染机制、通信机制，setData 的出现（逻辑层通知渲染层）、工作原理（evaluateJavascript 字符串传递）、使用建议（setData 交互性能）、性能优化（原生组件出现）。
小程序乍一看是简单的双线程设计，但仔细研究就会发现设计过程中也遇到了不少问题，不断探索解决才有了现在的美好样子。我们在开发过程中会踩的一些坑，其实在理解原理之后便很容易懂了。
现在再来看，官方在性能优化中说到的优化建议，你都能深刻理解了吗？
微信小程序 setdata 第3篇
我们知道，小程序的双线程设计，主要为了管控安全，避免操作 DOM。（可参考上期干货《小程序的底层框架》）
把开发者的 JS 逻辑代码放到单独的线程去运行，因为不在 Webview 线程里，所以这个环境没有 Webview 任何接口，自然开发者就没法直接操作 DOM，也就没法动态去更改界面。
但是，这样就产生了新的问题。没法操作 DOM，那用户交互需要界面变化的话怎么办呢？
模版数据绑定的方案，已经成为前端框架中最基础的功能。
数据绑定的过程其实不复杂：
1.解析语法生成 AST。
2.根据 AST 结果生成 DOM。
3.将数据绑定更新至模板。
浏览器会把 HTML 解析成一棵树，最后渲染出来。整个界面是对应着一棵 DOM 树。
其实浏览器页面的 DOM 结构树，也是 AST 的一种，把 HTML DOM 语法解析并生成最终的页面。而模板引擎中常用的，则是将模板语法解析生成 HTML DOM。
而最容易引发性能问题的，主要是第三点。而关于数据更新的解决方案，React 首先提出了虚拟 DOM 的设计，而现在也基本被大部分框架吸收，小程序也不例外。
说到数据更新的 Diff，更多的则是Diff + 更新模板这样一个过程。
虚拟 DOM 解决了常见的局部数据更新的问题，例如数组中值位置的调换、部分更新。
一般来说计算过程如下：
1.用JS对象模拟DOM树。
一个真正的DOM元素非常庞大，拥有很多的属性值。而其中很多的属性对于计算过程来说是不需要的，所以我们的第一步就是简化 DOM 对象。我们用一个 JavaScript 对象结构表示 DOM 树的结构。
2.比较两棵虚拟DOM树的差异。
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异。通常来说这样的差异需要记录，最后得到一组差异记录。
3.把差异应用到真正的DOM树上。
对差异记录要应用到真正的 DOM 树上，例如节点的替换、移动、删除，文本内容的改变等。
小程序里，由于无法直接操作 DOM，主要也是通过数据传递的方式来进行相关的模版更新。模版绑定的机制、数据更新的机制，都可以参照上面的说明。
那么既然不在一个线程，数据的通信是怎么做的呢？
小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。
一个小程序存在多个界面，所以渲染层存在多个 WebView 线程。 逻辑层和渲染层的通信会经由微信客户端（Native）做中转，逻辑层发送网络请求也经由 Native 转发 ，小程序的通信模型如图：
当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。
而 evaluateJavascript 的执行会受很多方面的影响，数据到达视图层并不是实时的。所以我们的setData函数将数据从逻辑层发送到视图层，是异步的。
有了线程之间的通信，我们来看看小程序的渲染机制。
双线程的渲染，其实是结合了前面的一系列机制（模版绑定、虚拟 DOM、线程通信），最后整合的一个执行步骤。
1. 通过模版数据绑定和虚拟 DOM 机制，小程序提供了带有数据绑定语法的 DSL 给到开发者，用来在渲染层描述界面的结构。
就是我们常见的这些：
123
噢，这里顺便吐个槽，wx:if竟然不支持[].indexOf(xx) > -1等等相关的函数运算（摔！）。
2. 小程序在逻辑层提供了设置页面数据的 api。
不用问就是setData了：
123
({key: value})
setData函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的的值（同步）。
3. 逻辑层需要更改界面时，只要把修改后的 data 通过 setData 传到渲染层。
传输的数据，会转换为字符串形式传递，故应尽量避免传递大量数据。
4. 渲染层会根据前面提到的渲染机制重新生成 VD（虚拟 DOM）树，并更新到对应的 DOM 树上，引起界面变化。