動態

詳情 返回 返回

原生微信小程序響應式數據 - 動態 詳情

原生微信小程序提供兩種響應式數據處理方式

1、module:value="{{ xxx }}"
2、setData

module:value

第一種方式為簡易雙向綁定,這種雙向綁定只能對應data中的簡單數據類型,例如:string、number、boolean、null,例如:

  data: {
    keyword: '' // data中直接定義
  },

頁面用module:value="{{ keyword }}"直接綁定, 這種就是簡易雙向綁定,數據是響應式變化。

setData

setData的賦值是響應式的,setData是一個函數式操作,它有兩種賦值方式:1、直接賦值;2、表達式賦值
直接賦值

    this.setData({
      keyword: '賦值了',
    })

這是對data中的數據進行直接的賦值操作,有時候你可能會對data中某一個對象中的某個值進行賦值,那麼可以用第二種表達式賦值
表達式賦值

 data: {
    info: {
      id: 1,
      name: '世界'
    }
  },

  this.setData({
      ["info.name"]: '賦值了',
      // "info.name": '賦值了'
  })

表達式賦值可以讓對象中的某個值發生變化。

注意:微信小程序的setData不支持直接修改深層數組的某項,對於深層數組的修改需要直接對數組進行setData才能保持響應式。

// 修改數組中某項的數據並在頁面更新
// 失敗的賦值-深層數組的setData無效
this.setData({
  [formList[i][formList[i].fvEnNameToCamelCase]]: dictValue,
})
// 無效
this.setData({
  ["info[0].name"]: '賦值了', 
})

// 正確賦值-保持響應式
formList[i][formList[i].fvEnNameToCamelCase] = dictValue
this.setData({ formList })

setData的鏈式調用

setData實際上是一個異步的操作,有時候我們在setData後進行其它的業務邏輯操作,為了保證是在setData賦值完成後才做的邏輯操作,我們可以在setData賦值後再接函數調用,例如:

  this.setData({
      keyword: '賦值了',
  },() => {
    console.log('賦值完成後的操作')
  })
user avatar talkcss 頭像 weidelanqiu 頭像 2021_60e2de6ea45f7 頭像
點贊 3 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.