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資料變更時同步

視圖層更新是異步