微信小程序打夯之旅(八)：mpvue和wepy问题总结

mpvue 问题总结 - 2018.03.28

#issue地址

1. { { } } 中不支持复杂的 js 语法，由于 mpvue 会把 { { } } 中的内容直接编译到 wxml 中，受限于微信小程序的能力。
2. 不支持复杂 slot，具名 slot 和单个 slot 插槽能够支持，可是 slot 的 scoped 不支持，即下面的状况没法获取 item 和 index

<component v-for="item in todos" :key="item">
    {{ item }}  /* 获取不到 */
</component>
复制代码

3. 组件渲染是串行的，而原生的是并行的。假设一个页面中用到了5个A组件，一个组件渲染时间大约为100毫秒，那么在原生中全部组件渲染完成约为100毫秒（并行渲染），而在mpvue中则须要约为500毫秒（串行渲染）。
4. 当动态绑定一个数据时，某些状况下即便该数据没有发生变化，也会被刷新。以下面是一个简单的 slider，想要在拖动的时候实时修改标题，可是会不断地从新赋值为 chapterIndex 的值，就会出现回弹的 bug ，并且松手后的 value 不是最新的 value，而是 chapterIndex（下面注释部分为解决方案）。scroll-view 若是动态绑定 scrolltop 也有一样的问题。

// 假设如今chapterIndex为0，slider最大为10
<slider :value="chapterIndex"
          @changing="sliderChooseChaptering"
          @change="sliderChooseChaptered">


// 拖动slider到5处
sliderChooseChaptering(e) {
    // this.chapterIndex = undefined;       // 经过设置为undefined能够避免滚动条回退
    this.toolbarTitle = 'new title';      // 改动了标题变量，可是slider会被从新赋值，小圆点回退到0处
},

sliderChooseChaptered(e) {
    let chapterIndex = e.mp.detail.value;
    console.log(chapterIndex);            // 值为0，而不是5
    // this.chapterIndex = chapterIndex;    // 从新赋值
}
复制代码

5. 上传体验版的时候，访问路径为 pages/***/main，如 pages/index/main
6. 图片 url 不能使用相对路径， 不然在手机上将显示不出来

<image :src = 'imgUrl'></image>

imgUrl() {
    return '../../static/images/test.png';  // 错误方法
    return '/static/images/test.png';   // 正确方法
}
复制代码

7. scroll-view 中没法监听到垂直的 touchmove (原生的也有一样的问题)

<scroll-view style="height:100rpx" scroll-y @touchstart="tstart" @touchend="tend" @touchmove="tmove"><div style="height: 200rpx">hahahah</div></scroll-view>


tstart() {
  console.log('tstart');
},
tend() {
  console.log('tend');
},
tmove() {
  console.log('tmove');
},
复制代码

wepy 问题总结 - 2018-03-12

1. 组件动态绑定只能绑定一层，如 :nickName.sync="nickName"，当父组件的 nickName 改变时，子组件中的数据没有刷新
2. 1.7.2中可使用原生组件解决了组件共享数据的问题，可是父组件没法再经过 $broadcast 下传事件了
3. 当使用 image 时可能会致使体验 bug ，出现场景：侧滑组件分上下两层，上层含有 image 标签，当快速加载多个侧滑组件时，会出现下层按钮闪现的状况（百来毫秒），下降体验感
4. 没有数据共享？？
5. 组件循环渲染必定要用repeat，而repeat自己充满了bug，真的让人头疼 #issue

mpvue相对于wepy的优点

1. mpvue 组件化开发能力更强，wepy 组件化支持仍有不少不足，其中组件数据共享的问题简直鸡肋。虽然在1.7.2以后可使用原生的组件从而达到数据隔离的目的，可是原生语法和 wepy 语法很容易发生混淆。若是要循环渲染组件，则必定要用到 repeat 标签，而 repeat 标签自己充满着 bug。
2. mpvue支持 vuex，wepy 开发过程当中多页面间共享的数据很难维护，只能用 globaldata 或者 storage 来达到数据共享效果。
3. 语法和特性与 vue 更加相似，wepy 只是借鉴了 vue，自己和 vue 仍是有较大差异的。

mpvue相对于wepy的劣势

1. 和wepy同样，{ { } } 中不支持复杂的js语法，由于 mpvue 会把 { { } }中的内容直接编译到 wxml 中，受限于微信小程序的能力。
2. 不支持复杂 slot，具名 slot 和单个 slot 插槽能够支持，可是 slot 的 scoped 不支持，即下面的状况没法获取 item 和 index

<component v-for="item in todos" :key="item">
    {{ item }}  /* 获取不到 */
</component>
复制代码

3. 组件中不支持transition，动画可能要跪