mpvue 问题总结 - 2018.03.28
#issue地址
-
{ { } } 中不支持复杂的 js 语法，因为 mpvue 会把 { { } } 中的内容直接编译到 wxml 中，受限于微信小程序的能力。
- 不支持复杂
slot，具名 slot 和单个 slot 插槽可以支持，但是 slot 的 scoped 不支持，即下面的情况无法获取 item 和 index
<component v-for="item in todos" :key="item">
{{ item }} /* 获取不到 */
</component>
- 组件渲染是串行的，而原生的是并行的。假设一个页面中用到了5个A组件，一个组件渲染时间大约为100毫秒，那么在原生中所有组件渲染完成约为100毫秒（并行渲染），而在mpvue中则需要约为500毫秒（串行渲染）。
- 当动态绑定一个数据时，某些情况下即使该数据没有发生变化，也会被刷新。如下面是一个简单的
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; // 重新赋值
}
- 上传体验版的时候，访问路径为
pages/***/main，如 pages/index/main
- 图片
url 不能使用相对路径， 否则在手机上将显示不出来
<image :src = 'imgUrl'></image>
imgUrl() {
return '../../static/images/test.png'; // 错误方法
return '/static/images/test.png'; // 正确方法
}
-
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
- 组件动态绑定只能绑定一层，如
:nickName.sync="nickName"，当父组件的 nickName 改变时，子组件中的数据没有刷新
- 1.7.2中可以使用原生组件解决了组件共享数据的问题，但是父组件无法再通过
$broadcast 下传事件了
- 当使用
image 时可能会导致体验 bug ，出现场景：侧滑组件分上下两层，上层含有 image 标签，当快速加载多个侧滑组件时，会出现下层按钮闪现的情况（百来毫秒），降低体验感
- 没有数据共享？？
- 组件循环渲染一定要用repeat，而repeat本身充满了bug，真的让人头疼
#issue
mpvue相对于wepy的优势
-
mpvue 组件化开发能力更强，wepy 组件化支持仍有很多不足，其中组件数据共享的问题简直鸡肋。虽然在1.7.2之后可以使用原生的组件从而达到数据隔离的目的，但是原生语法和 wepy 语法很容易发生混淆。如果要循环渲染组件，则一定要用到 repeat 标签，而 repeat 标签本身充满着 bug。
- mpvue支持
vuex，wepy 开发过程中多页面间共享的数据很难维护，只能用 globaldata 或者 storage 来达到数据共享效果。
- 语法和特性与
vue 更加类似，wepy 只是借鉴了 vue，本身和 vue 还是有较大差别的。
mpvue相对于wepy的劣势
- 和wepy一样，
{ { } } 中不支持复杂的js语法，因为 mpvue 会把 { { } }中的内容直接编译到 wxml 中，受限于微信小程序的能力。
- 不支持复杂
slot，具名 slot 和单个 slot 插槽可以支持，但是 slot 的 scoped 不支持，即下面的情况无法获取 item 和 index
<component v-for="item in todos" :key="item">
{{ item }} /* 获取不到 */
</component>
- 组件中不支持transition，动画可能要跪
