小程序与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绑定。