TS配合HTML模板时访问大型对象数据成员的更优方式选择

两种写法不是简单的语法简写区别，在数据同步逻辑、维护成本、实际表现上都有明确差异：

• 数据同步逻辑完全不同
  直接在模板引用obj.m1这类对象属性的写法，模板和原对象是直接绑定关系：只要组件触发变更检测，就会实时读取对象上的最新属性值渲染，不需要额外写同步代码。
  提前在ts里把属性拆成m1 = obj.m1这类单独变量的写法，本质是做了一次值赋值：如果属性是字符串、数字、布尔这类基础类型，后续原对象obj.m1的值修改后，拆出来的m1不会自动更新，必须手动重新赋值才能同步到视图，非常容易出现“数据改了页面没反应”的bug；如果属性是数组、嵌套对象这类引用类型，因为拆出来的变量和原属性指向同一块内存，修改内部内容时会同步，但如果原对象整体被替换，拆出来的变量还是会指向旧对象，依然会出现数据不同步的问题。
• 性能差异可忽略
  几十个属性的对象在模板里直接读取属性的开销极低，常规变更检测流程下完全感知不到性能差别。反而手动拆几十个变量，还要额外写一堆属性同步的赋值逻辑，平白增加无效代码量。
• 维护成本差距明显
  模板里直接写obj.xxx的形式，能清晰看到字段所属的业务对象，后续调整对象结构时，全局搜索obj.就能快速定位所有模板引用点。如果全拆成平级的零散变量，很容易出现命名冲突，时间久了根本分不清哪个变量对应哪个业务字段，排查问题要反复对照字段映射关系。

• 绝大多数常规场景，直接选第一种：在模板里直接引用对象属性即可。不需要写多余的拆分、同步代码，逻辑最直观，也不容易出数据不同步的问题。如果用了OnPush变更检测策略，只要更新对象时替换整个对象引用，或者更新属性后手动标记变更检测即可，额外成本极低。
• 仅在两种特殊场景下适合拆成单独变量：
  1. 字段需要做复杂的二次转换（比如多字段拼接、格式转换、计算逻辑），且转换后的值在模板里多次复用，拆成变量可以避免在模板里重复写计算逻辑，也方便统一调整计算规则。
  2. 字段的属性路径极深（比如obj.user.info.address.province），每次在模板写全路径冗余且容易写错，可以拆成短变量简化模板写法，但必须记得在原数据更新时同步给拆分后的变量，避免数据不一致。

不要为了“模板写起来短”就把大对象的所有属性全拆成平级变量，后续维护时的同步成本和出bug的概率会高很多。

内容的提问来源于stack exchange，提问作者Kartiken Barniwal