在原生小程序開發(fā)中，數(shù)據(jù)流是單向的，無法雙向綁定，用官方的框架 wepy 可能很容易就可以實(shí)現(xiàn)雙向綁定。但是，不用任何框架，就用原生的組件開發(fā)技術(shù)，你也可以很容易實(shí)現(xiàn)雙向綁定的功能！

下文要講的是小程序框架 minapp 中實(shí)現(xiàn)雙向綁定的原理，minapp 是一款完全兼容原生小程序組件開發(fā)的框架，在 minapp 中，你只需要在 wxml 模板中給組件的屬性名后加上 .sync 就可以實(shí)現(xiàn)雙向綁定。下面為了解釋其原理，過程可能會(huì)說的稍微復(fù)雜些，但其實(shí) minapp 框架已經(jīng)處理了那些繁雜的細(xì)節(jié)！

首先， 要使數(shù)據(jù)雙向綁定，應(yīng)該避免過多的數(shù)據(jù)源 。 在數(shù)據(jù)從上到下自然流動(dòng)的情況下，如果每個(gè)組件中都維護(hù)它們自己的數(shù)據(jù)，而又要保持它們數(shù)據(jù)值的一致，這雖然可以做到，但實(shí)現(xiàn)過程并不會(huì)簡單。 但是也沒必要說為了有一個(gè)統(tǒng)一的數(shù)據(jù)源就使用 mobx 或 redux 來全局管理數(shù)據(jù)，這就有點(diǎn)殺雞用牛刀的感覺了。 由于雙向綁定只存在于父子組件之間，而數(shù)據(jù)又是從父到子傳遞的，所以可以優(yōu)先使用父組件中的數(shù)據(jù)為數(shù)據(jù)源， 子組件每次更新數(shù)據(jù)并不更新它自己內(nèi)部的數(shù)據(jù)，而是通過事件機(jī)制觸發(fā)父組件更新它的數(shù)據(jù)，而父組件更新數(shù)據(jù)后又會(huì)將更新的數(shù)據(jù)自然地傳給子組件， 由此達(dá)到數(shù)據(jù)的雙向流動(dòng)！

并不是所有數(shù)據(jù)都需要雙向綁定，也并不是所有數(shù)據(jù)都是對(duì)外的，子組件還可以有它自己的一個(gè)內(nèi)部數(shù)據(jù)。所以這就涉及到我們要說的第二個(gè)問題： 區(qū)分哪些數(shù)據(jù)需要雙向綁定，哪些數(shù)據(jù)又需要子組件自己維護(hù) 。

用過 vue 的應(yīng)該都知道，在 vue 中要實(shí)現(xiàn)雙向綁定，需要在模板中做特殊處理。比如要將父組件的 parentAttr 雙向綁定到子組件的 childAttr 上，需要在父組件的模板中這樣寫：

<child childAttr.sync="parentAttr" />

但是小程序并沒有這樣的簡單的語法，小程序的 wxml 語言的屬性名中甚至都不允許出現(xiàn) " . " 這樣的字符?；氐轿覀兊膯栴}上來， 子組件需要知道哪些屬性需要雙向綁定，哪些屬性需要自己維護(hù) ， 給模板加個(gè)字段（ syncAttrMap ）專門來告訴子組件需要雙向綁定的數(shù)據(jù)集合不就行了么。如，可以將上面的示例寫成微信小程序支持的寫法：

<child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" />

<!--
  如果同時(shí)存在多個(gè)雙向綁定和不需要雙向綁定的屬性時(shí)，可以寫成下面這樣：
  p1, p2 分別雙向綁定到子組件的 c1, c2，而 p3 單向綁定到 c3 上
-->

<child c1="{{p1}}" c2="{{p2}}" c3="{{p3}}" syncAttrMap="c1=p1&c2=p2" />

接著，就需要處理 子組件數(shù)據(jù)更新的問題 了，在子組件中有兩部分?jǐn)?shù)據(jù)，一部分是內(nèi)部數(shù)據(jù)，另一部分是父組件中的數(shù)據(jù)， 子組件可以通過讀取屬性 syncAttrMap 來得到哪些數(shù)據(jù)是內(nèi)部的數(shù)據(jù)，哪些數(shù)據(jù)是父組件的數(shù)據(jù)，并且可以知道對(duì)應(yīng) 的父組件中的數(shù)據(jù)的鍵名是什么。由于原生的組件方法 setData 不會(huì)管你是內(nèi)部數(shù)據(jù)，還是父組件中的數(shù)據(jù)，只要 你調(diào)用它去更新數(shù)據(jù)，它只會(huì)更新內(nèi)部的數(shù)據(jù)。所以需要另外實(shí)現(xiàn)一個(gè)新的方法，來自動(dòng)判斷數(shù)據(jù)源，如果是內(nèi)部數(shù)據(jù)， 則直接調(diào)用 setData ；如果是雙向綁定中的父組件數(shù)據(jù)，則可以觸發(fā)一個(gè)事件去通知父組件去更新對(duì)應(yīng)的值。

所以根據(jù)上面的描述，父組件需要有個(gè)監(jiān)聽函數(shù)，子組件需要有個(gè)智能的 setData 函數(shù)。不防將父組件的監(jiān)聽函數(shù) 命名為 onSyncAttrUpdate ，將子組件的智能 setData 函數(shù)命名為 setDataSmart ，則可以有如下代碼：

// 父組件
Component({
  methods: {
    onSyncAttrUpdate(e) {
      this.setData(e.detail) // 子組件傳來的需要更新的數(shù)據(jù)
    }
  }
})

<!-- 父組件的模板 -->
<child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" bind:syncAttrUpdate="onSyncAttrUpdate" />

// 子組件
Component({
  properties: {
    childAttr: String,
    syncAttrMap: String
  },
  methods: {
    // 子組件更新數(shù)據(jù)時(shí)，只要調(diào)用此方法即可，而不是 `setData`
    setDataSmart(data) {
      // splitDataBySyncAttrMap 函數(shù)的實(shí)現(xiàn)過程就不說了，只是將對(duì)象拆分，大家應(yīng)該都能實(shí)現(xiàn)
      let {parentData, innerData} = splitDataBySyncAttrMap(data, this.data.syncAttrMap)

      // 內(nèi)部數(shù)據(jù)使用 setData 更新
      if (Object.keys(innerData).length) {
        this.setData(innerData) // setData 中還支持 callback 的回調(diào)，為了簡化代碼，這里不討論
      }

      // 雙向綁定的父組件數(shù)據(jù)觸發(fā)事件讓父組件自己去更新
      if (Object.keys(parentData).length) {
        this.triggerEvent('syncAttrUpdate', parentData)
      }
    }
  }
})

到此，一個(gè)簡單的雙向綁定功能就完成了。但是由于子組件也有可能包含其它組件，也就是說子組件也可以是父組件，而父組件同樣也 可以是子組件。所以上面的 onSyncAttrUpdate setDataSmart 函數(shù)需要在每個(gè)組件中都實(shí)現(xiàn)，所以不防 定義一個(gè)公共對(duì)象 BaseComponent 來實(shí)現(xiàn)上面的所有功能，如：

// BaseComponent
const BaseComponent = {
  properties: {
    syncAttrMap: String
  },
  methods: {
    setDataSmart() {
      // ...
    },
    onSyncAttrUpdate() {
      // ...
    }
  }
}

然后將 BaseComponent mixin 到每個(gè)組件的對(duì)象上去就可以了；另外小程序中還有一個(gè)特殊的組件： Page ，雖然 Page 和 Component 結(jié)構(gòu)是兩樣的， 但它也應(yīng)該算是一個(gè)組件，不過它一定是父組件，不可能是別的組件的子組件，所以還需要將 onSyncAttrUpdate 方法寫了所有的 Page 定義中。 所有這些就是 minapp 的雙向綁定的基本原理了。

等等，最后還有一件事： wxml 模板 ，不能讓用戶每次寫雙向綁定的時(shí)候都要寫那么復(fù)雜語句吧？當(dāng)然不用， minapp 在編譯模板時(shí)，會(huì)將模板做個(gè)簡單的轉(zhuǎn)化：

<child childAttr.sync="parentAttr" />

<!-- 由于屬性名 syncAttrMap 是固定的，所以完全可以通過編譯手段，將上面的模板轉(zhuǎn)成下面這個(gè)模板 -->

<child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" />