作者：Mora
在原生小程式開發中，資料流是單向的，無法雙向繫結，但是要實現雙向繫結的功能還是蠻簡單的！
下文要講的是小程式框架 minapp 中實現雙向繫結的原理，在 minapp 中，你只需要在 wxml 模板中給元件的屬性名後加上
.sync就可以實現雙向繫結。下面為了解釋其原理，過程可能會說的稍微複雜些，但其實 minapp 框架已經處理了那些繁雜的細節！
首先，要使資料雙向繫結，應該避免過多的資料來源。 在資料從上到下自然流動的情況下，如果每個元件中都維護它們自己的資料，而又要保持它們資料值的一致，這雖然可以做到，但實現過程並不會簡單。 但是也沒必要說為了有一個統一的資料來源就使用 mobx 或 redux 來全域性管理資料，這就有點殺雞用牛刀的感覺了。 由於雙向繫結只存在於父子元件之間，而資料又是從父到子傳遞的，所以可以優先使用父元件中的資料為資料來源， 子元件每次更新資料並不更新它自己內部的資料，而是通過事件機制觸發父元件更新它的資料，而父元件更新資料後又會將更新的資料自然地傳給子元件， 由此達到資料的雙向流動！
並不是所有資料都需要雙向繫結，也並不是所有資料都是對外的，子元件還可以有它自己的一個內部資料。所以這就涉及到我們要說的第二個問題：區分哪些資料需要雙向繫結，哪些資料又需要子元件自己維護。
用過 vue 的應該都知道，在 vue 中要實現雙向繫結，需要在模板中做特殊處理。比如要將父元件的 parentAttr 雙向繫結到子元件的 childAttr 上，需要在父元件的模板中這樣寫：
<child childAttr.sync="parentAttr" />
複製程式碼但是小程式並沒有這樣的簡單的語法，小程式的 wxml 語言的屬性名中甚至都不允許出現 " . " 這樣的字元。回到我們的問題上來，子元件需要知道哪些屬性需要雙向繫結，哪些屬性需要自己維護，
給模板加個欄位（syncAttrMap）專門來告訴子元件需要雙向繫結的資料集合不就行了麼。如，可以將上面的示例寫成微信小程式支援的寫法：
<child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" />
<!--
如果同時存在多個雙向繫結和不需要雙向繫結的屬性時，可以寫成下面這樣：
p1, p2 分別雙向繫結到子元件的 c1, c2，而 p3 單向繫結到 c3 上
-->
<child c1="{{p1}}" c2="{{p2}}" c3="{{p3}}" syncAttrMap="c1=p1&c2=p2" />
複製程式碼接著，就需要處理子元件資料更新的問題了，在子元件中有兩部分資料，一部分是內部資料，另一部分是父元件中的資料，
子元件可以通過讀取屬性 syncAttrMap 來得到哪些資料是內部的資料，哪些資料是父元件的資料，並且可以知道對應
的父元件中的資料的鍵名是什麼。由於原生的元件方法 setData 不會管你是內部資料，還是父元件中的資料，只要
你呼叫它去更新資料，它只會更新內部的資料。所以需要另外實現一個新的方法，來自動判斷資料來源，如果是內部資料，
則直接呼叫 setData ；如果是雙向繫結中的父元件資料，則可以觸發一個事件去通知父元件去更新對應的值。
所以根據上面的描述，父元件需要有個監聽函式，子元件需要有個智慧的 setData 函式。不防將父元件的監聽函式
命名為 onSyncAttrUpdate，將子元件的智慧 setData 函式命名為 setDataSmart，則可以有如下程式碼：
// 父元件
Component({
methods: {
onSyncAttrUpdate(e) {
this.setData(e.detail) // 子元件傳來的需要更新的資料
}
}
})
複製程式碼<!-- 父元件的模板 -->
<child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" bind:syncAttrUpdate="onSyncAttrUpdate" />
複製程式碼// 子元件
Component({
properties: {
childAttr: String,
syncAttrMap: String
},
methods: {
// 子元件更新資料時，只要呼叫此方法即可，而不是 `setData`
setDataSmart(data) {
// splitDataBySyncAttrMap 函式的實現過程就不說了，只是將物件拆分，大家應該都能實現
let {parentData, innerData} = splitDataBySyncAttrMap(data, this.data.syncAttrMap)
// 內部資料使用 setData 更新
if (Object.keys(innerData).length) {
this.setData(innerData) // setData 中還支援 callback 的回撥，為了簡化程式碼，這裡不討論
}
// 雙向繫結的父元件資料觸發事件讓父元件自己去更新
if (Object.keys(parentData).length) {
this.triggerEvent('syncAttrUpdate', parentData)
}
}
}
})
複製程式碼到此，一個簡單的雙向繫結功能就完成了。但是由於子元件也有可能包含其它元件，也就是說子元件也可以是父元件，而父元件同樣也
可以是子元件。所以上面的 onSyncAttrUpdate setDataSmart 函式需要在每個元件中都實現，所以不防
定義一個公共物件 BaseComponent 來實現上面的所有功能，如：
// BaseComponent
const BaseComponent = {
properties: {
syncAttrMap: String
},
methods: {
setDataSmart() {
// ...
},
onSyncAttrUpdate() {
// ...
}
}
}
複製程式碼然後將 BaseComponent minin 到每個元件的物件上去就可以了；另外小程式中還有一個特殊的元件：Page，雖然 Page 和 Component 結構是兩樣的，
但它也應該算是一個元件，不過它一定是父元件，不可能是別的元件的子元件，所以還需要將 onSyncAttrUpdate 方法寫了所有的 Page 定義中。
所有這些就是 minapp 的雙向繫結的基本原理了。
等等，最後還有一件事：wxml 模板，不能讓使用者每次寫雙向繫結的時候都要寫那麼複雜語句吧？當然不用，minapp 在編譯時，會將模板做個簡單的轉化：
<child childAttr.sync="parentAttr" />
<!-- 由於屬性名 syncAttrMap 是固定的，所以完全可以通過編譯手段，將上面的模板轉成下面這個模板 -->
<child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" />
複製程式碼謝謝，文章到此結束，歡迎關注 minapp：重新定義微信小程式的開發
2019年，iKcamp原創新書《Koa與Node.js開發實戰》已在京東、天貓、亞馬遜、噹噹開售啦！