vue中使用qrcode,遇到两次渲染的问题
1.安装 qrcodejs2:
npm install qrcodejs2 --save
2.页面中引入:
import QRCode from "qrcodejs2";
components: {
QRCode
}
3.dom结构:
<div id="qrcode" ></div>
4.使用:
qrcode (url) { // 生成二维码
let that = this;
let qrcode = new QRCode('qrcodeId', {
width: 300,
height: 300, // 高度
text: url, // 二维码内容
// render: 'canvas' , // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
// background: '#f0f', // 背景色
// foreground: '#ff0' // 前景色
})
}
5.页面调用:
// 注意: 在需要调用的地方 这样必须这样调用 否则会出现 appendChild null 就是id为qrcode的dom获取不到 返回结果为null
this.$nextTick (function () {
this.qrcode();
})
正常使用流程就是这样,一切OK,大吉大利,今晚吃鸡,等等,有问题出来了 。。。
因为我们很多时候并不会像这样直接用,而是会在组件间使用,如果是组件间涉及了通信机制,就会很正常的用到Vuex进行全局状态的管理,然后呢,各位看官请接着往下看:
![](https://img2018.cnblogs.com/blog/1079947/201907/1079947-20190725111813933-619618366.png)
在计算属性中获取URL的值,然后进行qrcode渲染,结果就是:
可以看到这里被渲染了两次,
原因:
我通过调试猜测是qrcode的渲染机制和Vue的computed计算属性有错误,
解决办法:
将vue的计算属性通过观察者模式来输出
![](https://img2018.cnblogs.com/blog/1079947/201907/1079947-20190725140616917-82622359.png)
OK,现在就可以正常渲染了:
具体原因因为时间原因没法深入探究,我会找个空闲的机会把问题查清楚,如果有错误的地方还请大家指出,希望本文对你有所帮助!