【未經作者本人允許，請勿以任何形式轉載】
前幾篇講述微信小程序開發工具使用、生命周期和事件。
本次講述微信小程序數據和視圖綁定
>>>數據視圖綁定
做前端開發的同學，尤其是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方式操作數據和視圖，開發效率低，開發者不買賬。如果采用雙向數據流，程序執行效率偏低，而且是邏輯層對象狀態不可控。
總體來說，小程序數據視圖單向綁定開發模式，讓開發者專注於事件處理上，改變對象狀態，實現視圖更新。