小程序與Vue對比·數據綁定

小程序對項目代碼包的大小是有要求的，目前限制爲2M。2M大小，着實不大，尤爲是對那些有着多條業務線的公司。小程序是個寸土寸金的地方，每K必爭，絲絕不過。設想一下，隨着項目的持續迭代，新的功能不斷加進來，代碼量總有超過2M的時候，怎麼辦？此時，咱們就得將那些不是過重要的，但又不能丟掉的功能放到H5上去。而使用Vue框架開發H5在逐漸被更多的開發者地採用，那麼小程序轉Vue就是一個確實存在着的場景。本文的目的旨在經過對比小程序與Vue基礎語法，讓你們對小程序與Vue之間的轉換，哪些很容易搬過來，哪些須要通過適當變通，哪些壓根無法轉，有必定的瞭解。

第一篇先分析對比基礎的數據綁定。

數據綁定

1.文本

<view>小程序：{{message}}</view>
<span>Vue：{{message}}</span>
總結：文本綁定基本上能夠照搬過來。

2.HTML綁定

Vue提供了v-html指令用於輸出HTML，例如：

JS
data() {
    return {
        rawHtml: '<p><span>這是一些文本</span></p>'
    }
}

HTML
<div v-html="rawHtml"></div>
複製代碼

最終HTMl會被渲染爲：

HTML
<p><span>這是一些文本</span></p>
複製代碼

可是在小程序中，並無與v-html對應的api，有興趣的同窗能夠研究下這是爲什麼，能夠在評論區裏面交流。不過，小程序仍是提供了rich-text組件來實現相似的功能，只不過使用起來稍微有點麻煩。本文不對rich-text的使用作講解，想了解具的使用方法，可點此查看。結合實際場景，若是咱們要使用rich-text以下的渲染效果：

WXML
<p class="p-class"><span style="color:red;">這是一些文本</span></p>
複製代碼

能夠這樣：

JS
data: {
    nodes:[{
        name: 'p',
        attrs: {
            class: 'p-class'
        },
        children: [{
            name: 'span',
            attrs: {
                style: 'color:red;'
            },
            children: [{
                type: 'text',
                text: '這是一些文本'
            }]
        }]
    }]
}

WXML
<rich-text nodes="{{nodes}}"></rich-text>
複製代碼

渲染結果在UI上表現正常，可是在Wxml上並不會轉換成咱們預想的html標籤，仍然是rich-text標籤。

苦於小程序現有的api對富文本的解析支持程度較低，網上有些第三方插件給出瞭解決方案，其中wxParse就是傑出的表明，有關於wxParse的使用介紹，可 點此查看。
總結：關於HTMl綁定，小程序轉Vue比較容易，直接定義規範化的html標籤更符合咱們的習慣。Vue轉小程序比較麻煩，須要咱們將html標籤映射到小程序nodes集合。

HTML特性

關於什麼是HTML特性，咱們能夠這樣理解：HTML特性是指HTML標籤原生支持的屬性，無需用戶自定義，分爲全局屬性和特有屬性。全局屬性是全部標籤基本上都具備的屬性，好比class、id等。特有屬性是指某些特殊的標籤具備的屬性，好比type屬性，input和textarea等少數標籤才具備的屬性。

1.在Vue裏面

mustache語法不能做用在HTML特性上，遇到這種狀況須要使用v-bind指令，好比：

HTML
<div id="dynamicId"></div>
複製代碼

這一樣適用於布爾類型特性，好比：

HTML
<button v-bind:disabled="isBtnDisabled"></button>
複製代碼

2.在小程序裏面

mustache語法能夠直接做用在HTML特性上，好比：

WXML
<view id="{{dynamicId}}"></view>
複製代碼

對於布爾類型特性，mustache必定不要省略，不然會被當成字符串處理，形成拔苗助長的效果，好比：

WXML
<button disabled="falsy"></botton>
複製代碼

其中falsy泛指可轉換爲false的值。省略mustache，falsy會被當作字符串"falsy"處理，轉化成Boolean類型後表明真值。
總結：關於HTML特性的綁定，記住Vue使用v-bind指令，雙方之間的轉換也比較容易進行。

JavaScript表達式

vue和小程序都表達式，好比：

<div>{{bool ? 'yes' : 'no' }}</div> <view>{{bool ? 'yes' : 'no' }}</view>
有意思的是，小程序提供了在Mustache內對數組和對象進行組合的功能。

數組組合

JS  
data: {
    zero: 0
}

WXML
<view wx:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>
複製代碼

[zero, 1, 2, 3, 4]最終被組合爲[0, 1, 2, 3, 4]

對象組合

JS
data: {
    a: 1,
    b: 2
}

WXML
<view data-comb="{{foo: a, bar: b}}"></view>
複製代碼

data-comb最終組合成{foo: 1, bar: 2}
除此以外，小程序還借鑑了ES6的新特性，好比利用擴展運算符...將對象展開。好比：

JS
data: {
    obj1: {
        a: 1,
        b: 2
    },
    obj2: {
        c: 3,
        d: 4
    }
}

WXML
<view data-comb="{{...obj1, ...obj2, e: 5}}"></view>
複製代碼

data-comb最終組合成{a: 1, b: 2, c: 3, d: 4, e: 5}
擴展運算符...出現的意義就是實現數組和鬆散序列的相互轉化，取代apply方法等，有興趣的同窗嘗試模擬實現擴展運算符...對對象的展開。除此以外，也支持在組合中簡寫屬性，這一點與ES6一致，好比：

JS
data: {
    foo: 'my-foo',
    bar: 'my-bar'
}

WXML
<view data-comb="{{foo, bar}}"></view>
複製代碼

data-comb最終組合成{foo: 'my-foo', bar:'my-bar'}
總結：小程序與Vue在常規的表達式綁定方面基本上是一致的，若是你在小程序中使用上述的數組和對象的組合，就須要考慮在Vue去本身實現。

到此，數據綁定的先羅列這麼多，在後續的開發過程當中有特殊的案例或者須要特別指明的地方，我會編輯添加進來，也歡迎你們批評指正，下一篇對比分析class與style綁定。