style属性不能直接用setattribute更新，因为style是cssstyledeclaration对象，setattribute会全量覆盖导致其他样式丢失；diff算法将其作为对象单独遍历处理，逐项增删改以精准更新。
style属性为什么不能直接用setAttribute更新
因为style是 DOM 元素的CSSStyleDeclaration对象，不是普通字符串属性。用setAttribute('style', 'color: red; font-size: 14px')会覆盖整个内联样式，抹掉其他未改动的声明（比如原本存在的margin或display），导致意外样式丢失。
Diff 算法必须避免这种全量重写，所以它把style当作一个键值对对象单独处理：
- 先遍历旧
style对象的所有可枚举属性（如color、fontSize），对新style中不存在的键，设为空字符串：el.style.color = '' - 再遍历新
style对象，逐个赋值：el.style.backgroundColor = 'blue' - 遇到
undefined或null值，也统一清空对应样式（如el.style.opacity = null→el.style.opacity = ''）
驼峰 vs 连字符：React 和 Vue 的style写法差异
React 要求使用驼峰命名（fontSize、zIndex），Vue 同时支持驼峰和连字符（font-size、z-index），但底层都会归一化为 DOM 可识别的属性名。关键在于：虚拟节点中的style对象结构，直接影响 Diff 时的比对粒度。
例如，新旧 vnode 的style分别是：
old: { color: 'red', fontSize: '12px' }
new: { color: 'blue', lineHeight: '1.5' }
Diff 会执行三步：
- 清空旧
fontSize（因新对象无该键） - 更新
color（值从red→blue） - 新增
lineHeight（旧对象无此键）
不会碰margin、padding等未出现在任一style对象里的属性——它们保持原样。
哪些 style 值会被忽略或强制转换
浏览器对 CSS 值有隐式标准化行为，Diff 算法必须适配，否则会导致“看似没变却触发更新”：
-
0、''、null、undefined都被视作“移除该样式”，最终调用el.style.xxx = '' -
auto、inherit等关键字照常设置，但12这样的纯数字会被自动补px（仅适用于top、left等需单位的属性） -
display: 'flex'在 IE10 下可能被读作-ms-flexbox，但 Diff 不做兼容性修正——它只比对虚拟节点输入值，不干预渲染结果 - 自定义属性如
--primary-color会被正常处理，但注意：CSS 变量变更不会触发 layout，而width变更会
没有key时 style 更新会出什么问题
当列表项缺失key，Diff 退化为按索引硬对，此时style更新逻辑依然执行，但目标节点可能已错位。例如：
旧列表：[A(style: {color:'red'}), B(style: {color:'green'})]
新列表：[B(style: {color:'blue'}), C(style: {color:'yellow'})]
没key时，Diff 会认为：
- 索引 0：A → B，更新
color从red→blue（实际应删 A、建 B） - 索引 1：B → C，更新
color从green→yellow（实际 B 已被挪走，C 是全新节点）
结果是样式被错误复用，DOM 结构混乱，且style更新掩盖了更严重的节点复用错误。真正要 fix 的不是 style 本身，而是补上稳定key。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
