原生微信小程序提供兩種響應式數據處理方式
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('賦值完成後的操作')
})