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

檢視層更新是非同步