mpvue （ github 地址請參見 ）是一個使用Vue.js 開發(fā)小程序的前端框架?？蚣芑?nbsp;Vue.js核心， mpvue 修改了 Vue.js 的runtime 和compiler 實現(xiàn)，使其可以運行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗。

由來已久

一直以來，我都在用mpvue來編寫小程序應用，雖然問題很多，不過都有替代方案。

比如在mpvue中，slot（插槽）中的內容不能動態(tài)的渲染，那我們可以放棄使用slot內使用動態(tài)數據。該問題在github中有多人反應。

再比如在mpvue中，自定義指令會直接導致編譯報錯，那么我們可以放棄使用自定義指令。該問題在github中也有多人反應。

但是今天的問題實在太嚴重，我一定要吐槽一下。

bug現(xiàn)象

我們在開發(fā)過程中，發(fā)現(xiàn)在某種情況下，頁面UI層的更新時機全部錯亂。即 數據變更后，只有在下次的onShow生命周期里有體現(xiàn)（有種“慢一拍”的感覺），整體的感覺就是 頁面的展示和交互完全癱瘓 。

bug調查

我們花了整整一天的時間調查，最后發(fā)現(xiàn)問題是 在自定義組件上動態(tài)為v-if綁定值賦值上 。

將代碼精簡到十幾行就可以復現(xiàn)bug。

bug再現(xiàn)

記住，這是一個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>復制代碼