vueで動的に二次元コードを生成する方法を実現します。

最近のプロジェクトでは分裂共有の需要があります。ページの中で共有者の身分に基づいて動的に二次元コード画像を生成してページに置く必要があります。この機能の実現を研究してみました。同時に実現過程を下記のように記録しています。
1.二次元コード生成モジュールの導入

npm install qrcodejs2 --save

注意：ここにQrcceodejs 2を設置し、依存をインストールしたら、mainメソッドでグローバル参照設定ができます。また、あるページだけで参照設定ができます。
2.導入使用

import QRCode from 'qrcodejs2';

備考：mainでグローバル設定をするとVue.prototype.qrCodeが使えます。

3.ページの展示と配置
3.1.コード
二次元コード画像を生成するコンテナを置く

<div id="qrCode" ref="qrCodeDiv"></div>

3.2 jsコード
jsコードには3種類の位置があります。
第一種類：mountedライフサイクル関数に置く

mounted() {
 new QRCode(this.$refs.qrCodeDiv, {
 text: "https://www.baidu.com",
 width: 200,
 height: 200,
 colorDark: "#333333", //     
 colorLight: "#ffffff", //      
 correctLevel: QRCode.CorrectLevel.L //   ，L/M/H
 });
}

第二の種類：createdライフサイクル関数に置いていますが、this.$nextTickの落下関数に必ず入れてください。

created() {
 this.$nextTick(function() {
 new QRCode(this.$refs.qrCodeDiv, {
  text: "https://www.baidu.com",
  width: 200,
  height: 200,
  colorDark: "#333333", //     
  colorLight: "#ffffff", //      
  correctLevel: QRCode.CorrectLevel.L //   ，L/M/H
 });
 });
},

第3の方法：methods属性において指定された方法において、moutedライフサイクル関数でこの方法を呼び出します。（この方法の呼び出しをthis.$nextTickのバックオフ関数にも置いたほうがいいです。）

mounted: function () {
 this.$nextTick(function () {
 this.bindQRCode();
 })
},
methods: {
 bindQRCode: function () {
 new QRCode(this.$refs.qrCodeDiv, {
  text: 'https://www.baidu.com',
  width: 200,
  height: 200,
  colorDark: "#333333", //     
  colorLight: "#ffffff", //      
  correctLevel: QRCode.CorrectLevel.L//   ，L/M/H
 })
 }
}

4.注意点
1.表示内容（textが指す内容）は、UTF-8符号化フォーマットでなければなりません。
2.二次元コードjsを生成するには、this.$nextTick（function（）{呼び出し}またはsetTimeout（（）=>{呼び出し}が必要であり、100）は、二次元コードコンテナDOMがすでに存在していることを確認するためである。
3.二次元コードの重複発生を防止するために、空きを使って制御する：document.getElementById("qrcode").innerHTML = "";ここで、Vueにおける二次元コードの生成方法についての記事を紹介します。これに関連して、Vue動的に二次元コードの内容を生成します。以前の文章や下の関連記事を検索してください。これからもよろしくお願いします。