微信小程序最近要火，火不火看看微信用戶就知道了，做前端的朋友可以大展身手，跟上腳步，這里來介紹下微信小程序的數據綁定。

>>>數據視圖綁定

做前端開發的同學，尤其是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方式操作數據和視圖，開發效率低，開發者不買賬。如果采用雙向數據流，程序執行效率偏低，而且是邏輯層對象狀態不可控。

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

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！