mpvue（github 地址請參見）是一個使用 Vue.js 開發小程式的前端框架。框架基於Vue.js核心，mpvue修改了Vue.js的 runtime 和 compiler 實現，使其可以執行在小程式環境中，從而為小程式開發引入了整套Vue.js開發體驗。
由來已久
一直以來，我都在用mpvue來編寫小程式應用，雖然問題很多，不過都有替代方案。
比如在mpvue中，slot（插槽）中的內容不能動態的渲染，那我們可以放棄使用slot內使用動態資料。該問題在github中有多人反應。
再比如在mpvue中，自定義指令會直接導致編譯報錯，那麼我們可以放棄使用自定義指令。該問題在github中也有多人反應。
但是今天的問題實在太嚴重，我一定要吐槽一下。
bug現象
我們在開發過程中，發現在某種情況下，頁面UI層的更新時機全部錯亂。即 資料變更後，只有在下次的onShow生命週期裡有體現（有種“慢一拍”的感覺），整體的感覺就是頁面的展示和互動完全癱瘓。
bug調查
我們花了整整一天的時間調查，最後發現問題是在自定義元件上動態為v-if繫結值賦值上。
將程式碼精簡到十幾行就可以復現bug。
bug再現
記住，這是一個mpvue專案。我在src/pages/目錄下新建一個test頁面，對應的index.vue檔案的程式碼如下，邏輯很簡單，就是利用v-if控制一個元件的顯示：
<
template>
<
test v-if="show">
<
/test>
<
/template>
<
script>
import test from '@/components/posterTest.vue'export default {
data () {
return {
show: true
}
}, onShow () {
this.show = false //在onShow生命週期裡，先將v-if繫結值置位false，2秒再置位true setTimeout(() =>
{
this.show = true
}, 2000)
}, components: {
test
}
}<
/script>
複製程式碼其中引入了posterTest元件。為了調查bug，我將多餘的操作處理全部去掉，只有一張圖片，它的程式碼如下：
<
template lang="html">
<
div class="poster">
<
img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="">
<
/div>
<
/template>
<
script>
export default {
}<
/script>
複製程式碼這個頁面只要一載入，2秒後控制檯就會報下面的錯誤。
而只要報了這個錯誤，其他頁面也跟著掛了。就像前面提到的一樣，結果是災難性的——頁面都掛掉了，雙向繫結的更新總像慢了一拍。
找到報錯的程式碼，上面還有了一條有意新增的註釋（也是vue原始碼的）
所以我懷疑是mpvue在排程上存在問題。
解決方法
- mpvue還是要用的，但是以後不能再用v-if來操作元件的顯示了，乖乖用v-show吧。但是話說回來，vue這樣的操作可是一點毛病沒有的。
- 在外層套一個div標籤
總結
作為框架，作為一個“輪子”，我覺得不應該有這樣“後果嚴重”的bug出現。再退一步說，一個頁面的bug能導致到整個應用“癱瘓”，也是很恐怖的。
還是要感謝mpvue為我們帶來的種種方便。