十幾行程式碼就可以讓你的微信小程式掛掉
mpvue （ Dianping%2Fmpvue" target="_blank" rel="nofollow,noindex">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這樣的操作可是一點毛病沒有的。
總結
作為框架，作為一個“輪子”，我覺得不應該有這樣“後果嚴重”的bug出現。再退一步說，一個頁面的bug能導致到整個應用“癱瘓”，也是很恐怖的。
還是要感謝mpvue為我們帶來的種種方便。