遇到的问题：VUE 项目里把 data 里定义的对象数组赋值给新的变量，新的变量对数组对象做了一些操作，但却把 data 里面原本的对象数组也修改了。

下面举一个简单例子：

1
2
3
4
5
6
7
8
9
10
11
12
13

window.onload = function () {
     const b = [
       { name: "John", age: 25 },
       { name: "Jane", age: 30 },
     ];
     var a = b

     // 修改变量 a 的值
     a[0].age = 99;

     console.log(a); // 输出[{name: 'John', age: 99}, {name: 'Jane', age: 25}]
     console.log(b); // 输出[{name: 'John', age: 99}, {name: 'Jane', age: 25}]
   };

BFC 定义

1. BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个“特异功能”。
2. 该 “特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。
3. 所谓激活“特异功能”，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。

BFC 能解决什么问题

1. 元素开启BFC 后，其子元素不会再产生margin 塌陷问题。
2. 元素开启BFC 后，自己不会被其他浮动元素所覆盖。
3. 元素开启BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

1.常用布局名词

权重是用来确定哪个样式规则应该应用于元素的。权重越高，优先级越高。

权重计算分为四个等级：

行内 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器 *

• 内联样式（Inline styles）：权重为 1000
• ID 选择器（ID selectors）：权重为 100
• 类选择器（Class selectors）、属性选择器（Attribute selectors）和伪类选择器（Pseudo-classes）：权重为 10
• 元素选择器（Element selectors）和伪元素选择器（Pseudo-elements）：权重为 1

举例：

#my-id：权重为 100（一个ID选择器）
.my-class：权重为 10（一个类选择器）
div：权重为 1（一个元素选择器）
a:hover：权重为 11（一个元素选择器和一个伪类选择器）

当有多个选择器应用于同一个元素时，权重最高的选择器将应用其样式。如果权重相同，那么按照选择器在 CSS 中出现的顺序，后出现的选择器将覆盖先前的选择器。

“Lorem”通常是指”Lorem Ipsum”，这是一种常用于印刷和排版设计中的占位符文本。它通常用于填充空白区域，以便在设计过程中更好地预览布局和格式。它的实际内容并没有意义，只是一些拉丁文单词和短语的随机组合。

在 VSCode 中输入：

1

<div>lorem5</div>

将会生成:

1

<div>Lorem ipsum dolor sit amet.</div>