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，動畫可能要跪
