可能会有这个疑惑，为什么要用js生成二维码而不是向后端请求，其实答案就在问题里咯，最直接的就是可以减轻服务器的压力，不用在用户需要显示二维码时每次都向服务器都调用库或服务去生成一张图片，然后再发送给用户。如果用户量很大，这会消耗大量的服务器 CPU 和内存资源。使用 JS 生成，服务器只需要返回一段文本数据（比如一个 URL 字符串），浏览器端自己把它画成二维码；还有就是根据动态信息即时生成二维码，二维码的内容可以根据用户操作即时变化，无需刷新页面。例如在电商后台，调整优惠券的金额，旁边的二维码瞬间就更新了，对应的就是新金额的领券链接，无需重新请求后端。如果二维码需要长期存有，或者样式比较复杂，则可以考虑选择后端生成。
演示如何使用Vue3框架生成一个二维码组件，先是安装依赖
npm install qrcode<script setup>
import { ref, watch, onMounted } from 'vue';
import QRCode from 'qrcode';
const props = defineProps({
text: { type: String, default: 'https://www.doubao.com' },
size: { type: Number, default: 200 }
});
const canvasRef = ref(null);
const generate = () => {
if (!props.text) return;
QRCode.toCanvas(canvasRef.value, props.text, { width: props.size });
};
onMounted(generate);
watch(() => [props.text, props.size], generate);
</script>
<template>
<div class="qrcode-box">
<canvas ref="canvasRef"></canvas>
</div>
</template>
<style scoped>
.qrcode-box { display: inline-block; }
</style>使用示例：
<template>
<div>
<QrCode text="backurl" :size="180" />
</div>
</template>
<script setup>
import QrCode from './QrCode.vue';
</script>其中text的内容可以替换成从后端引入的响应式数据。
