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