小程式與Vue對比·資料繫結

叫我振振發表於2018-12-18
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標籤。

小程式與Vue對比·資料繫結
苦於小程式現有的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繫結。

相關文章