mpvue 问题总结 - 2018.03.28

#issue地址

  1. { { } } 中不支持复杂的 js 语法，因为 mpvue 会把 { { } } 中的内容直接编译到 wxml 中，受限于微信小程序的能力。

  2. 不支持复杂 slot，具名 slot 和单个 slot 插槽可以支持，但是 slot 的 scoped 不支持，即下面的情况无法获取 item 和 index

    1
    2
    3
    <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 也有同样的问题。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 假设现在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 不能使用相对路径， 否则在手机上将显示不出来

    1
    2
    3
    4
    5
    6
    <image :src = 'imgUrl'></image>

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     <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

    1
    2
    3
    <component v-for="item in todos" :key="item">
        {{ item }}  /* 获取不到 */
    </component>

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