10月28日
1. Object.assign
Object.assign(target, source) 的作用是：
把 source 对象中的所有可枚举属性逐个复制到 target 对象中。
也就是说它等价于：
for (const key in source) {target[key] = source[key];
}
如果target是reactive()数据，使用Object.assign(target, source)去替换，可以使target依旧保留响应式
整体替换
target = source;
会使reactive()的target丢失响应式。
Object.assign(target, source) 是按 属性名（key）匹配和覆盖 的，不按顺序。
它的逻辑大致是：
for (let key of Object.keys(source)) {target[key] = source[key];
}
也就是说：
遍历右侧对象的每一个键（key）；
如果 target（目标对象）里有这个 key，就覆盖；
如果没有，就新增这个属性。
例子：
const form = { a: 1, b: 2 };
Object.assign(form, { b: 10, c: 20 });
结果：
form = { a: 1, b: 10, c: 20 }
// b 被覆盖，c 被新增2. 栅格布局和CSS Grid
栅格系统”不是指 CSS Grid，而是一种分栏思想。
它的核心思路：
- 把页面宽度平均分成固定份数（比如 12 份），
- 每个元素占若干份数（span），从而实现响应式分栏布局。
这种思想可以用多种技术实现：
| 技术 | 样例 | 是否常用于栅格布局 |
|---|---|---|
float | float:left; width: 25%; | ✅ 早期常用 |
flex | display:flex; + justify-content | ✅ 现在主流 |
grid | display:grid; grid-template-columns: repeat(12, 1fr) | ✅ 越来越常见 |
那“CSS Grid”算不算“栅格布局”？
严格来说：
CSS Grid 是一种 布局技术（Layout Module）
“栅格系统（Grid System）”是一种 布局思想
所以：
用 CSS Grid 技术实现的 12 列分栏布局，也可以称为“栅格布局”。
只是：
“栅格布局” ≠ “CSS Grid”
“CSS Grid” 是实现“栅格布局”的一种现代方式
“栅格布局” 是一种把页面划分成多列的布局思想；
“Grid” 是和“Flex” 同级的 CSS 技术。
3. Vant 的栅格系统
Vant 的栅格系统底层就是 flex 布局。