小程序与Vue对比·数据绑定

2018-12-19  本文已影响0人  叫我振振

小程序对项目代码包的大小是有要求的，目前限制为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标签。

image
苦于小程序现有的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绑定。

上一篇 下一篇

猜你喜欢

热点阅读