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

由來(lái)已久

一直以來(lái)，我都在用mpvue來(lái)編寫(xiě)小程序應(yīng)用，雖然問(wèn)題很多，不過(guò)都有替代方案。

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

再比如在mpvue中，自定義指令會(huì)直接導(dǎo)致編譯報(bào)錯(cuò)，那么我們可以放棄使用自定義指令。該問(wèn)題在github中也有多人反應(yīng)。

但是今天的問(wèn)題實(shí)在太嚴(yán)重，我一定要吐槽一下。

bug現(xiàn)象

我們?cè)陂_(kāi)發(fā)過(guò)程中，發(fā)現(xiàn)在某種情況下，頁(yè)面UI層的更新時(shí)機(jī)全部錯(cuò)亂。即 數(shù)據(jù)變更后，只有在下次的onShow生命周期里有體現(xiàn)（有種“慢一拍”的感覺(jué)），整體的感覺(jué)就是 頁(yè)面的展示和交互完全癱瘓 。

bug調(diào)查

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

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

bug再現(xiàn)

記住，這是一個(gè)mpvue項(xiàng)目。我在src/pages/目錄下新建一個(gè)test頁(yè)面，對(duì)應(yīng)的index.vue文件的代碼如下，邏輯很簡(jiǎn)單，就是利用v-if控制一個(gè)組件的顯示：

<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>復(fù)制代碼

其中引入了posterTest組件。為了調(diào)查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>復(fù)制代碼