JS交互逻辑详解——data数据变更时同步（setData 函数） & 视图层更新是异步

JS交互逻辑详解——data数据变更时同步（setData 函数） & 视图层更新是异步

• js和wxml交互流程分析

  • js与模板是如何交互的？

• App() 该函数是微信小程序api的一部分，App名称是固定的

  • getApp() 作用：在子页面中使用全局实例对象中的数据和方法
    • 不可以显示的调用全局生命周期函数
    • 但是可以直接操作自定义的数据或者函数
  • 这app.js中通过this的方式获取小程序实例

• Page() 该函数是微信小程序api的一部分，Page名称是固定的

  • 页面数据 data

  • 生命周期函数

  • 事件处理函数

  • setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

    • data数据变更时同步的：就是调用完成setData之后，可以直接在后面获取到最新值
    • 视图层更新是异步的：调用完成setData之后，页面有可能还没有更新，必须setData回调函数触发的时候才更新。

    在单页面文件夹demo下面的demo.js中：

      handleData: function() {
        // 如果保证页面更新后再处理别的业务
        this.setData({
          msg: 'nihao'
        }, function() {
          console.log('页面已经更新好了')
        })
      }
    

详细版：

demo/index.wxml

<view>
	{{msg}}
</view>
<view>
	<button bindtap='handleTap'>
        点击
    </button>
</view>

demo/index.js

  handleTap: function () {
    // setData更新数据是同步的
    // 但是页面内容的变化时异步的
    this.setData({
      msg: 'hello'
    }, () => {
      // 该回调函数执行时，页面内容已经完成了更新
      console.log('页面内容已经更新')
    })
    // 当这里获取到最新数据时，页面的内容有可能还没有更新
    console.log(this.data.msg)
  },

data数据变更时同步

视图层更新是异步