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数据变更时同步

视图层更新是异步