mpvue是一個使用 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'
export default {
data () {
return { show: false }
},
onShow () {
this.show = true
setTimeout(() => { this.show = false }, 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這樣的操作可是一點毛病沒有的。
總結
作爲框架，作爲一個“輪子”，我覺得不應該有這樣“後果嚴重”的bug出現。再退一步說，一個頁面的bug能導致到整個應用“癱瘓”，也是很恐怖的。
還是要感謝mpvue爲我們帶來的種種方便。