官網：https://qiu8310.github.io/minapp/
作者：Mora
在原生小程式開發中，資料流是單向的，無法雙向綁定，但是要實作雙向綁定的功能還是蠻簡單的！
下文要講的是小程式架構 minapp 中實作雙向綁定的原理，在 minapp 中，你隻需要在 wxml 模闆中給元件的屬性名後加上 .sync
首先，要使資料雙向綁定，應該避免過多的資料源。
在資料從上到下自然流動的情況下，如果每個元件中都維護它們自己的資料，而又要保持它們資料值的一緻，這雖然可以做到，但實作過程并不會簡單。
但是也沒必要說為了有一個統一的資料源就使用 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：重新定義微信小程式的開發