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進行全局狀態的管理，然后呢，各位看官請接着往下看：

在計算屬性中獲取URL的值，然后進行qrcode渲染，結果就是：

可以看到這里被渲染了兩次，

 原因：

我通過調試猜測是qrcode的渲染機制和Vue的computed計算屬性有錯誤，

解決辦法：

將vue的計算屬性通過觀察者模式來輸出

OK，現在就可以正常渲染了：

 

 具體原因因為時間原因沒法深入探究，我會找個空閑的機會把問題查清楚，如果有錯誤的地方還請大家指出，希望本文對你有所幫助！