html二维码本身是静态dom元素，动态生成需js实时调用qrcode.js等前端库；直接拼接url方式存在长度限制、无缓存、不可控等问题；推荐canvas/svg输出并注意无障碍支持。
HTML 二维码本身不能改善动态生成——它只是静态渲染的 DOM 元素，不自带动态能力；真正起作用的是你用什么方式在运行时调用生成逻辑。
为什么直接写 <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&text=...?x-oss-process=image/resize,p_40"> 不算“动态生成”
这种写法看似能换 text 参数，但本质是服务端静态图片 URL 拼接，页面加载后无法更改内容，也不响应数据变化。一旦 text 依赖用户输入、API 返回或路由参数，就必须在 JS 中实时构造并更新。
- URL 长度受限（尤其含中文或 token 时），容易被截断或 414 错误
- 每次修改都触发新请求，无缓存复用，网络开销大
- 无法控制容错等级（
L/M/Q/H）、边距、颜色等精细参数 - 第三方服务不可控：限流、停服、HTTPS 混合内容警告
用 qrcode.js 在浏览器里实时生成更可靠
推荐使用轻量库如 qrcode.js（注意不是 qrcode-generator 或 @xkeshi/qrcode，前者已多年未维护），它纯前端运行，支持 Canvas/SVG 输出，可绑定事件重绘。
- 引入方式：
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/dist/qrcode.min.js"></script> - 生成到 Canvas：
QRCode.toCanvas(canvasEl, "https://example.com?id=123", { width: 200, margin: 5, errorCorrectionLevel: 'M' }) - 若需响应式更新，不要反复创建新 Canvas，而是复用同一个
<canvas></canvas>并调用toCanvas()覆盖 - 中文支持没问题，但需确保传入的是字符串而非对象——
JSON.stringify(obj)后再传
Vue/React 里别手动操作 DOM，用 ref + effect 封装
在框架中硬写 document.getElementById 或直接改 src 属于反模式。应把二维码作为受控组件处理。
- Vue 3 示例：
onMounted(() => QRCode.toCanvas(canvasRef.value, data.value))，并在watch(data, () => QRCode.toCanvas(canvasRef.value, data.value))中响应更新 - React 示例：用
useEffect初始化 + 依赖数组触发重绘，避免在render中调用生成函数（会无限循环） - 注意：Canvas 内容不会随父容器缩放自动适配，需监听
resize或用 CSStransform: scale()辅助，但会模糊——优先用 SVG 输出（QRCode.toString('svg', options)）
最常被忽略的一点：二维码内容变更后，必须同步更新 alt 属性和 ARIA 标签，否则对屏幕阅读器不友好；而 SVG 输出天然支持 <title></title> 和 <desc></desc>，比 Canvas 更适合无障碍场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
