微信小程序关于this.setData的坑

最近在学习微信小程序语法时遇到了各种各样的坑，今天记录一下其中最常用一个this.setData函数的坑。

下图是一个test.wxml的展示，内容非常简单，其中给两个按钮分别添加了两个点击事件。

下图是test.js的内容，data中包含n1,n2,sum。还有两个自己定义的函数，分别是n1add1,n2add2

函数n1add1的功能是让n1加1，并且更新最后的sum值。函数n2add1的功能是让n2加1，并且更新最后的sum值。但是当我们点击第一个按钮时会出现下图的结果：

这时我们发现n1的值加1了，但是sum的值没有更新，我甚是奇怪，然后在n1add1函数的基础上增加了一个控制台打印语句，如下图：

第一个矩形框是新加的打印语句，第二个矩形框是第一次点击一个按钮的结果，我们发现n1的值确实+1了，但是sum的值确没有改变。说明运行sum:this.data.n1+this.data.n2这条语句时，this.data.n1的值和this.data.n2的值都为0，但明明上条语句n1:this.dada.n1+1执行过后，n1的值已经+1了，应该已经变成了1，这是非常令人费解的。其实这里理解成n1和this.data.n1是两个数据，在n1:this.data.n1+1这条语句执行后，n1的值变成了1，但是this.data.n1的值并没有改变，等this.setData这个函数执行完时，n1的值才赋值给了this.data.n1。那这个问题如何解决呢，提供一种思路：写两个this.setData函数 如下图：

将第二个更新sum值的操作放到第二个this.setData函数里，这样sum的更新就正常了。