记一次 vue 的异步更新队列导致内存泄漏

起因#

由于项目是需要连续传输图片形成一个伪视频（没办法，客户钱给的不够）来观看。后端采用传输 base64 的图片到前端展示。

环境#

php: 7.2

workerman: 3.X

vue: 2.X

过程#

workerman 与树莓派进行 socket 连接，树莓派通过摄像头将视频截取为一张张的图片发送到 workerman，workerman 再将图片转为 base64 的格式通过 websocket 传输到前端 vue。vue 接收到消息后将 base64 赋值到变量中。

<img  src="'data:image/png;base64,'+videobox.image" >
var vm = new Vue({
    data: {
        videobox: {
           image: "",
        }
    },
    method: {
        getImage: function(data) {
                this.videobox.image = data.image
        }
    }
})

由于后端会一直传输 base64 格式的图片到 vue 上，所以 video.image 会不断的刷新，但是内存却忽然间爆涨了起来

记一次vue的异步更新队列导致内存泄漏

一张图片才几十 k，内存却几秒钟涨到了 G 的级别，所以怀疑是内存泄漏了。

查阅了文档后发现异步队列更新

记一次vue的异步更新队列导致内存泄漏

也就是说每一次的数据更新都会进入到队列中，并且缓存了起来..... 所以我的内存才爆涨了起来。。

解决方案也有，就是采用 $nextTick () 方法来刷新队列。。

<img  src="'data:image/png;base64,'+videobox.image" >
var vm = new Vue({
    data: {
        videobox: {
           image: "",
        }
    },
    method: {
        getImage: function(data) {
                this.$nextTick(function() {
                    this.videobox.image = data.image
                });
        }
    }
})