progress.value赋值无效主因是未设max或值超范围、类型错误；需显式声明value和max为纯数字，js更新用el.value=number()并校验范围，框架中须手动操作dom属性而非依赖响应式绑定。
progress.value 赋值无效，90% 是因为没设 max，或值超范围、类型不对——它不报错，但 UI 会卡死、跳变或直接不渲染。
为什么直接 el.value = 65 没反应？
浏览器默认 max="1"，所以 value="65" 实际超出上限，被静默截断为 1，进度条要么满格、要么退回到“不确定状态”（带动画的模糊条）。value 和 max 必须同时显式声明，且都为纯数字：
-
<progress value="30" max="100"></progress>✅ -
<progress value="30"></progress>❌（max缺失） -
<progress value="30" max="100px"></progress>❌（max含单位） -
<progress value="30" max="100"></progress>+el.value = "65"❌（字符串类型，Safari 可能拒绘）
用 JS 更新 value 的正确写法
必须操作 DOM 属性，不是 HTML 属性；赋值前建议校验范围，避免静默失败：
- 用
el.value = Number(newValue)，别用el.setAttribute('value', ...) - 更新前加校验：
el.value = Math.min(Math.max(0, newValue), el.max) - 如果
max来自服务端或用户输入，先转数字：el.max = Number(serverMax) - 高频更新（如
requestAnimationFrame）无需节流，但连续 50ms 写一次在旧 Safari 中可能卡顿或跳变
React/Vue 中绑定失效怎么办？
框架的响应式 props（如 value={x}）只控制初始渲染，不会自动同步到 DOM 的 value 属性。progress 不是受控组件，也不触发 onChange：
- React：必须用
useRef拿到原生元素，再手动赋值ref.current.value - Vue：不能只靠
:value="current"，需配合watch或updated钩子调用el.value = ... - 任何框架里，都不要在模板中写
<progress :value="x"></progress>就以为完事了——它不生效
想让进度看起来“动起来”，光改 value 不够
progress 本身无动画能力，视觉平滑得靠 CSS 控制伪元素过渡，但支持度有限：
- Chrome/Edge：可对
::-webkit-progress-value设transition: width 0.3s ease - Firefox：不支持
width过渡，只能靠 JS 分步赋值模拟（比如每 50ms +1） - 别给
progress元素本身设transition，它不起作用 - 真正需要复杂动画、反向、多色或高无障碍支持时，该换
div + ARIA方案
最易被忽略的一点：Safari（尤其 iOS 15 及更早）对 max 和 value 的类型极其敏感——一个字符串 "100" 和一个数字 30 组合，可能直接不画填充块。初始化就写死 max="100" value="0"，JS 里统一用 Number() 转，比事后调试省三倍时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
