十几行代码就可以让你的微信小程序挂掉，微信卡死代码直接复制

mpvue是一个使用Vue.js 开发小程序的前端框架。框架基于 Vue.js核心 mpvue 修改了 Vue.js 的runtime 和compiler 实现使其可以运行在小程序环境中网站排名使其可以运行在小程序环境中从而为小程序开发引入了整套 Vue.js 开发体验。

由来已久

一直以来我都在用mpvue来编写小程序应用虽然问题很多不过都有替代方案。

再比如在mpvue中自定义指令会直接导致编译报错那么我们可以放弃使用自定义指令。该问题在github中也有多人反应。

但是今天的问题实在太严重我一定要吐槽一下。

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绑定值置位false2秒再置位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能导致到整个应用“瘫痪”也是很恐怖的。