微信小程序打夯之旅(八)：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，動畫可能要跪