微信小程序----修改data中的數據，頁面數據不改變

錯誤緣由

因爲VUE等框架，咱們在邏輯層修改data中的數據後，視圖層（頁面渲染）會跟着發生變化。固然微信小程序也是實現了相同的功能，那麼出現錯誤的緣由是什麼？答案：微信小程序的setData()方法。

常見賦值方式（習慣）致使的錯誤

Page({
  data: { isShow: false },
  changeStatus(){
    console.log(this.data.isShow);
    this.data.isShow = true;
    console.log(this.data.isShow);
  }
})

效果圖

從上邊代碼和效果圖咱們能夠看出：一、習慣的賦值方式「=」在邏輯層是起到了做用改變了isShow；二、視圖層的並無發生變化。
結論就是常規的「=」賦值方式，在微信小程序中只能改變data中的數據，而不能改變視圖層的數據，那麼微信小程序怎麼解決這個問題的，setData()方法。

Page.prototype.setData()

setData 函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。

setData函數作了哪些事情？

1. 將數據從邏輯層發送到視圖層—-這個恰好解決咱們這裏出現的錯誤，視圖層數據的改變
2. 改變對應的 this.data 的值—-同時在邏輯層將data中的值改變

Page({
  data: {
    isShow: false,
    isShow1: false
  },
  changeStatus(){
    console.log(this.data.isShow);
    this.data.isShow = true;
    console.log(this.data.isShow);
  },
  changeStatus1() {
    console.log(this.data.isShow);
    this.setData({ isShow:true});
    console.log(this.data.isShow);
  }
})

效果圖

總結：

1. 在開發程序的時候，咱們要遵循別人的規則來開發，不要被習慣所左右；
2. 熟悉開發文檔，減小這種習慣錯誤（不易被發現）；
3. 微信小程序開發中，爲了減小data和視圖層數據表現不一致，所有采用setData方法修改值。

setData函數注意事項

1. 直接修改 this.data 而不調用 this.setData 是沒法改變頁面的狀態的，還會形成數據不一致。
2. 單次設置的數據不能超過1024kB，請儘可能避免一次設置過多的數據。
3. 請不要把 data 中任何一項的 value 設爲 undefined ，不然這一項將不被設置並可能遺留一些潛在問題。

其餘

個人博客，歡迎交流！

個人CSDN博客，歡迎交流！

微信小程序專欄

前端筆記專欄

微信小程序實現部分高德地圖功能的DEMO下載

微信小程序實現MUI的部分效果的DEMO下載

微信小程序實現MUI的GIT項目地址

微信小程序實例列表

前端筆記列表

遊戲列表