本次講述微信小程序數據和視圖綁定。

》》》數據視圖綁定

做前端開發的同學，尤其是WEB前端，每天都要跟視圖打交道，假如你是用過jQuery，你就能體會到jQuery的代碼冗余和操作不便性，需要手動管理視圖和對象的數據一致性。

以下數據和對象等同。

傳統的視圖和數據綁定

那么微信小程序是通過什么方法來管理視圖和對象綁定的呢？狀態模式-單向數據流。

狀態模式定義一個對象，這個對象可以通過管理其狀態從而使得應用程序作出相應的變化。

簡單的講，對象狀態化，只要對象狀態發送變化，就通知頁面更新視圖元素。
三個步奏：

1. 識別哪個UI元素被綁定了相應的對象。
2. 監視對象狀態的變化。
3. 將所有變化傳播到綁定的視圖上。

注意數據流向是單向的，即視圖變化不會影響對象狀態。

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

就這么簡單完成視圖跟數據的綁定。

僅僅通過數據更新視圖是不夠的，用戶操作引起視圖更新，數據怎么同步呢？

這里要區分的是，用戶觸發事件不僅要考慮當前UI元素更新，還會通過當前元素更新其他視圖。

所以視圖上的數據都必須用過事件傳遞給對象，只有用戶操作視圖，才能獲取到數據，并更新對象狀態。
如下圖：

》》》什么是『事件』：

事件是視圖層到邏輯層的通訊方式。

想知道為什么的童鞋可以了解數據單雙向流，這里不介紹了。

再來看視圖與視圖之間是如何影響?

流程說明：

1. 視圖A由于用戶操作，觸發事件A
2. 事件A處理函數中，更新對象A和對象B的狀態
3. 由于對象A和B狀態變化，通知視圖A和B更新

我們以用戶登錄為例，用戶點擊(事件A)登錄按鈕后，把按鈕變成禁用不可點(視圖A)，同時彈出等待框(視圖B).
部分代碼如下：

<view>
    <loading hidden="{{loadingHidden}}">正在登錄...</loading>
    <button type="primary" size="default" disabled="{{disabled}}" bindtap="loginBtn">數據請求</button>
</view>

Page({
  data:{
    disabled: false,
    loadingHidden: true
  },
  //按鈕事件
  loginBtn: function(event){
    //禁用按鈕
    this.setData({disabled: true});
    //彈出正在登錄框
    this.setData({loadingHidden: false});
  }
})

總結：

現在流行數據單雙向綁定，小程序使用了單向數據流，如果采用傳統的jQuery方式操作數據和視圖，開發效率低，開發者不買賬。如果采用雙向數據流，程序執行效率偏低，而且是邏輯層對象狀態不可控。

總體來說，小程序數據視圖單向綁定開發模式，讓開發者專注于事件處理上，改變對象狀態，實現視圖更新。