列表渲染翻译键必须按语义命名（如list.user_name）、扁平化、全小写下划线；动态插入节点后立即调用translatenode()翻译；排序文案需独立标记并配合intl.collator；服务端列表数据只传标识符，前端查语言包映射。
列表渲染时翻译键怎么命名才不乱序
列表项的翻译键必须带序号或语义前缀，否则加载后顺序错乱、复用逻辑崩溃。比如 list.item_1、list.item_2 这类硬编码序号，在动态增删时会立刻失效；而 list.user_name、list.user_email 这种按字段语义命名，才能和数据结构对齐。
常见错误现象：list.0、list.1 这类数组索引式键名，导致后端加个字段、前端漏改一个键，整行文案就错位；或者语言包里键名大小写混用（List.title vs list.Title），IE11 或某些 fetch 缓存策略下查不到 key，直接留白。
- 键名统一用小写字母 + 下划线，如
user_list_header、user_list_empty_state - 列表标题、空状态、加载中提示等“非数据驱动”文案，单独拆出公共键，不塞进循环体
- 避免在键名里嵌套层级，如
users.data.name—— 扁平结构才方便 JSON 文件对齐和 fallback 查找 - 如果列表支持排序/筛选，对应操作按钮文案（如
sort_by_date）也要提前定义，不能靠拼接字符串
动态列表插入后怎么立即翻译
<template></template> 或 document.createElement 创建的列表项，不会被全局翻译函数自动扫描。DOM 插入后若不手动触发，data-i18n 属性就只是字符串，没任何效果。
使用场景：AJAX 加载用户列表、点击展开二级菜单、分页加载更多 —— 这些都不是初始 HTML，而是运行时生成的节点。
- 封装
translateNode(node)函数，递归遍历子节点，识别data-i18n、data-i18n-placeholder等属性并填充 - 每次
appendChild()或insertAdjacentElement()后，立刻传入新节点调用translateNode() - 不要等
DOMContentLoaded或节流后的批量扫描 —— 那时用户已经看到英文原文了 - 若列表项含
<input>，跳过value属性更新，只处理placeholder、title、aria-label
排序字段本地化怎么同步更新
列表排序依据是后端返回的字段名（如 created_at），但表头文案、tooltip、排序提示语（“升序”“降序”）必须随语言切换实时变更，且不能影响实际排序逻辑。
容易踩的坑：把排序文案硬写进 JS 字符串里，比如 `Sort by ${field} (ASC)`，结果切换语言后 ASC 不变，中文用户看到“按创建时间 ASC”；或者用 Intl.Collator 做前端排序，却忘了不同语言的字母顺序规则（如德语 ö 排在 o 后，瑞典语 å 在 z 后）。
- 排序按钮的
title和 tooltip 文案，用data-i18n-title="sort.created_at.asc"单独标记 - 表头文字用
data-i18n="table.header.created_at"，不拼接字段名 - 需要前端排序时，用
new Intl.Collator(lang, { numeric: true })，别用String.prototype.localeCompare()默认行为 - 升序/降序图标旁的文字提示（如小字“↑ 升序”），必须走语言包，不能靠 CSS 伪元素生成
服务端返回的列表数据要不要带翻译
纯前端国际化时，服务端返回的列表数据（如 [{ name: "John", role: "Admin" }]）**不应**包含翻译字段。角色名、状态标签这类内容，应由前端根据当前语言从语言包映射，而不是让后端返回 role_zh: "管理员"。
原因很实在：后端多语言接口要维护字段膨胀、缓存失效、权限校验绕过风险；而前端统一查表，能复用已有键、支持 runtime 切换、避免接口版本分裂。
- 后端只返回标准化标识符，如
role: "admin"、status: "pending" - 前端用
t(`role.${item.role}`)查语言包，键为role.admin、role.pending - 若某些字段值本身就是多语言（如商品名称），那是内容数据，不是 UI 文案 —— 应走独立多语言 CMS 字段，而非 i18n 键值系统
- 服务端可提供
Accept-Language感知的错误消息、表单选项 label，但列表主体数据保持中立
<tr> 都带着正确的 <code>lang 属性、正确的 data-i18n 键、正确的 placeholder 和 title，而且不丢掉已绑定的事件监听器。漏掉任意一环，用户就会在滚动列表时突然看到中英混杂的界面。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
