Interview with ChatGPT 4o



> 请你详细解释一下Vue的响应式系统是如何工作的？具体来说，Vue是如何追踪数据的变化并更新视图的？

:::info{title="相关信息"}
Vue通过使用**依赖收集**和**数据劫持**来实现这一点。具体来说，Vue会在初始化对象时，通过`Object.defineProperty`（Vue 2.x）或`Proxy`（Vue 3.x）将对象的每个属性转换为“响应式”属性。当这些属性被访问时，Vue会将当前的“依赖”——通常是渲染函数或计算属性——收集起来，并在属性发生变化时重新触发这些依赖的更新。这样，当数据变化时，Vue会知道哪些部分的视图需要重新渲染。

:::
> 请解释一下JavaScript中的事件循环机制（Event Loop）。为什么事件循环对于JavaScript的异步编程非常重要？

:::info{title="相关信息"}
JavaScript是单线程的，这意味着它一次只能执行一个任务。为了处理异步任务（例如网络请求、定时器等），JavaScript使用了**事件循环机制**。

事件循环（Event Loop）的工作流程如下：

1. **调用栈（Call Stack）**：JavaScript中的所有同步任务都会在调用栈中执行。当我们调用一个函数时，它会被推入调用栈，函数执行完后会从调用栈中弹出。如果调用栈为空，JavaScript引擎就会查看事件队列。

2. **事件队列（Event Queue）**：异步任务的回调函数会被放入事件队列中。当异步任务（如定时器到期、网络请求完成等）准备好被执行时，它们的回调函数会被添加到事件队列中。

3. **事件循环**：事件循环不断地检查调用栈是否为空，如果为空，它会从事件队列中取出第一个回调函数并将其推入调用栈执行。

通过这种机制，JavaScript可以执行异步代码，而不需要阻塞主线程。例如，当一个网络请求在后台运行时，JavaScript仍然可以继续执行其他代码。当请求完成时，相应的回调函数会被放入事件队列，等待调用栈为空时执行。

**为什么事件循环重要？**

事件循环是JavaScript处理异步操作的基础。它允许JavaScript在等待某些操作完成时（如I/O操作）仍然能够响应用户交互和执行其他代码。这使得JavaScript可以实现非阻塞的I/O操作，提升程序的性能和响应速度。
:::

> 盒模型包含哪些部分，它们如何影响元素的布局和大小？


:::info{title="相关信息"}
1. **内容（Content）**：这是元素的实际内容区域，例如文本、图片等。内容的宽度和高度可以通过`width`和`height`属性来设置。

2. **内边距（Padding）**：这是围绕内容区域的空间，内边距位于内容区域和边框之间。可以通过`padding`属性来设置内边距的大小。内边距会增加元素的可见大小，但不会影响背景颜色的显示范围。

3. **边框（Border）**：这是围绕内边距的边界线，可以通过`border`属性设置边框的宽度、样式和颜色。边框也会增加元素的可见大小。

4. **外边距（Margin）**：这是元素与相邻元素之间的空间，可以通过`margin`属性来设置。外边距不会影响元素的实际大小，但会影响元素在页面上的位置。外边距可以为正、负值或自动调整（`auto`）。
:::

> 请解释一下HTTP和HTTPS的区别。为什么要使用HTTPS，HTTPS是如何保证数据传输安全的？

:::info{title="相关信息"}
区别：
1. **传输方式**：
   - **HTTP**：确实是明文传输的，这意味着数据在传输过程中是可以被第三方拦截并读取的，导致安全性较低。
   - **HTTPS**：在HTTP的基础上添加了一层加密（通常是TLS/SSL），数据在传输过程中是加密的，只有通信的双方能够解密数据，保证了数据的保密性。

2. **端口**：
   - 你正确指出了HTTP使用的是80端口，而HTTPS使用的是443端口。

3. **性能**：
   - HTTPS确实在加密和解密过程中增加了一些计算开销，可能会稍微影响性能。但随着硬件的进步和TLS协议的优化，这种影响已经变得很小了，现代网站基本上都会默认使用HTTPS。

HTTPS与安全：
1. **加密**：
   - HTTPS使用TLS/SSL协议，TLS（Transport Layer Security）是SSL的升级版本，目前大多数情况下使用的是TLS协议。TLS使用了**非对称加密**（公钥和私钥），在握手过程中交换密钥，然后使用对称加密（如AES）来加密通信数据。非对称加密用于安全地交换对称加密的密钥。

2. **数据完整性**：
   - HTTPS不仅确保了数据的保密性，还通过消息认证码（MAC）等机制保证了数据的完整性，防止数据在传输过程中被篡改。

3. **身份验证**：
   - HTTPS通过数字证书验证服务器的身份，防止中间人攻击。客户端会验证服务器提供的证书是否由可信的证书颁发机构（CA）签署，以及证书是否与服务器的域名匹配。
:::

> 在JavaScript中，new关键字的作用和执行过程。当我们使用new关键字来创建一个对象时，JavaScript内部具体做了哪些事情？


:::info{title="相关信息"}
当我们在JavaScript中使用`new`关键字来创建一个对象时，JavaScript引擎实际上会执行以下几个步骤：

1. **创建一个新对象**：
   - JavaScript首先创建了一个新的空对象，这个对象继承自构造函数的`prototype`属性。可以理解为：`new`创建的对象的原型链上，会有该构造函数的`prototype`。

2. **将构造函数的`this`绑定到这个新对象上**：
   - 然后，JavaScript会将构造函数内部的`this`关键字指向新创建的对象。这样，在构造函数中定义的属性和方法就会被添加到这个新对象上。

3. **执行构造函数代码**：
   - JavaScript执行构造函数的代码，并将定义在`this`上的属性和方法绑定到新对象上。

4. **返回新对象**：
   - 最后，如果构造函数没有显式返回一个对象，那么JavaScript会自动返回新创建的对象。如果构造函数显式返回了一个对象（且该对象是一个非`null`的对象类型），则返回这个对象，而不是`new`创建的对象。
:::

> 请解释一下Vue.js中的v-if和v-show的区别。它们在实现上有什么不同，使用场景上有什么建议？

:::info{title="相关信息"}

`v-if` 和 `v-show` 的主要区别：

1. **DOM渲染方式**：
   - **`v-if`**：这个指令在条件为`false`时完全移除元素及其子元素，意味着元素不会存在于DOM中。当条件为`true`时，元素才会被重新添加到DOM树中。这涉及到元素的创建和销毁，切换开销较大。
   - **`v-show`**：这个指令无论条件为`true`还是`false`，元素始终存在于DOM中。它只是通过CSS的`display`属性控制元素的显示与隐藏（`display: none;`），切换开销较小。

2. **性能影响**：
   - **`v-if`**：适合在需要频繁切换元素时使用，因为每次条件切换都会触发DOM的添加或移除。如果切换频率较低，`v-if`的性能更优，因为只在需要时才渲染元素。
   - **`v-show`**：适合需要频繁显示和隐藏的场景，因为元素始终存在于DOM中，只是切换`display`属性，切换速度更快。

使用场景建议：
- 如果一个元素需要经常显示和隐藏，使用`v-show`会更合适，因为它只需切换`display`属性，效率更高。
- 如果一个元素在条件变化时只需要渲染一次或者几次（如动态加载的数据块），使用`v-if`更合适，这样可以避免不必要的DOM操作。
:::

> 请解释一下Promise在JavaScript中的作用以及它是如何工作的。为什么Promise对处理异步操作非常重要？


:::info{title="相关信息"}
1. **Promise是什么**：
   - `Promise`是JavaScript中用于处理异步操作的一种对象。它代表一个未来可能会有值的代理对象，这个值通常是异步操作的结果。
   - `Promise`有三种状态：
     - **Pending**（等待）：初始状态，表示操作还未完成，也未被处理。
     - **Resolved/Fulfilled**（已完成/已成功）：操作成功完成，并且有了一个值。
     - **Rejected**（已拒绝）：操作失败，并返回了一个原因。

2. **工作流程**：
   - `Promise`对象的构造函数接受一个执行函数，这个函数有两个参数：`resolve`和`reject`。在异步操作完成后，调用`resolve`会将`Promise`的状态变为`fulfilled`，并传递操作的结果；调用`reject`会将状态变为`rejected`，并传递失败的原因。
   - `then`方法用于注册当`Promise`成功时的回调，`catch`方法用于注册当`Promise`失败时的回调。

3. **为什么重要**：
   - **避免回调地狱**：在JavaScript中，传统的回调函数处理异步操作时，容易陷入“回调地狱”（callback hell），即嵌套的回调函数导致代码难以维护。`Promise`通过链式调用`then`方法，简化了代码结构，提高了可读性。
   - **更好的错误处理**：`Promise`使得错误处理更加集中和一致。通过`catch`方法，可以在一个地方捕获并处理所有的错误。
   - **组合异步操作**：`Promise`允许我们更方便地组合多个异步操作，例如使用`Promise.all`来等待多个`Promise`都完成，或者使用`Promise.race`来处理第一个完成的`Promise`。
:::

> 解释一下React中的“虚拟DOM”（Virtual DOM）是什么？为什么React要使用虚拟DOM，它是如何提升性能的？


:::info{title="相关信息"}
虚拟DOM的工作原理：

1. **虚拟DOM的本质**：
   - 虚拟DOM（Virtual DOM）是对真实DOM的一种轻量级的抽象表示，它是由JavaScript对象表示的树结构，类似于真实DOM的结构，但更轻便且无需直接与浏览器进行交互。

2. **传统DOM操作的开销**：
   - 正如你所提到的，直接操作真实DOM的代价很高。每次DOM的更新都可能会引发浏览器的重排和重绘，这在大量频繁更新的情况下会导致性能问题。

3. **虚拟DOM的优势**：
   - React通过在内存中维护一个虚拟DOM树，当组件的状态或属性发生变化时，React会先更新虚拟DOM，而不是直接操作真实DOM。
   - **Diff算法**：React使用一种高效的Diff算法来比较新旧两个虚拟DOM树，找出需要更新的最小部分。这种比较是基于同层比较的原则，React假设相同层级的节点结构相对稳定，这样可以将复杂度降低到O(n)。
   - **批量更新**：找到需要更新的部分后，React会将这些变化一次性更新到真实DOM中，而不是每次都即时更新。通过这种方式，React减少了对真实DOM的操作次数，从而提升了性能。

4. **性能提升**：
   - 虚拟DOM避免了不必要的DOM操作，通过批量更新减少了浏览器的重排和重绘次数。这种优化方式特别在需要频繁更新UI的应用中表现出色，如复杂的用户界面和实时数据更新。

为什么使用虚拟DOM：

- React使用虚拟DOM的主要目的是为了提升性能，特别是在数据频繁变化的场景下，虚拟DOM可以显著减少DOM操作的开销。
- 虚拟DOM还提供了一种更直观和声明式的编程模型，开发者可以专注于组件的状态和数据变化，而不必直接操作DOM，从而提升了开发效率和代码的可维护性。
:::

> 请举例说明flex-grow、flex-shrink、和flex-basis这三个属性的作用。


:::info{title="相关信息"}
你的回答很好地概括了`flex`布局的基本概念以及`flex-grow`和`flex-shrink`属性的作用。让我来详细解释一下，并补充你提到的`flex-basis`属性。

`flex`布局简介：

`flex`布局，也称为“弹性盒子布局”，是一种用于在容器中分配和对齐空间的布局模型。它允许子元素在一个容器中按照特定的规则进行排列，无论是水平排列还是垂直排列。`flex`布局特别适用于动态调整布局的场景，例如响应式设计。

主要属性解释：

1. **`flex-grow`**：
   - 这个属性定义了**当容器中有剩余空间时，子元素如何分配这些空间**。
   - 值是一个非负整数，默认为`0`，表示不增长。如果设置为`1`，表示该元素会占据容器中剩余空间的一部分。多个元素的`flex-grow`值可以不同，值越大，分配到的剩余空间比例越多。
   - 例如：
     ```css
     .box {
       flex-grow: 1;
     }
     ```

2. **`flex-shrink`**：
   - 这个属性定义了**当容器空间不足时，子元素如何收缩**。
   - 值是一个非负整数，默认为`1`，表示元素会收缩。值越大，收缩的比例越大。如果设为`0`，表示该元素不会收缩。
   - 例如：
     ```css
     .box {
       flex-shrink: 1;
     }
     ```

3. **`flex-basis`**：
   - 这个属性定义了**在分配多余空间之前，子元素的初始大小**。
   - 它可以是一个长度值（如`px`、`em`等）或`auto`。如果是`auto`，元素的基础尺寸由它的内容决定。如果设置了具体值（如`100px`），则元素在`flex-grow`和`flex-shrink`起作用前的基础大小将为这个值。
   - `flex-basis`可以理解为元素的“初始宽度”或“初始高度”，具体取决于容器的`flex-direction`是横向还是纵向。
   - 例如：
     ```css
     .box {
       flex-basis: 100px;
     }
     ```

假设有一个`flex`容器，其中包含三个子元素：

```html
<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>
```

对应的CSS：

```css
.container {
  display: flex;
}

.box1 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
}

.box2 {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 200px;
}

.box3 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 150px;
}
```

- 如果容器中有多余空间，`box2`会占据更多空间，因为它的`flex-grow`值为`2`。
- 如果容器空间不足，三个元素都会收缩，但它们的初始大小（由`flex-basis`定义）会影响它们的最终大小。
- `flex-basis`定义了每个元素的初始大小，在此基础上，`flex-grow`和`flex-shrink`决定它们如何根据容器的大小变化。
:::

前端面试模拟

## Vue组件之间的通讯方式

在 Vue.js 中，组件之间的通信是一个常见的需求。Vue 提供了多种方式来实现组件之间的数据传递和通信，适用于不同的场景。以下是常见的 Vue 组件间通信方式：

### 1. **父子组件通信**

#### 1.1 父组件向子组件传递数据（`props`）
- **`props`** 是父组件向子组件传递数据的最常用方式。子组件通过声明 `props` 接收父组件传递的数据。
  
  **示例**：
  ```vue
  
  <template>
    <child-component :message="parentMessage"></child-component>
  </template>

  <script>
  export default {
    data() {
      return {
        parentMessage: 'Hello from parent'
      };
    }
  }
  </script>

  
  <template>
    <div>{{ message }}</div>
  </template>

  <script>
  export default {
    props: ['message']
  }
  </script>
  ```

#### 1.2 子组件向父组件传递数据（`$emit`）
- **`$emit`** 是子组件向父组件传递数据的常用方式，子组件通过 `this.$emit('eventName', data)` 触发自定义事件，父组件监听该事件并处理传递的数据。

  **示例**：
  ```vue
  
  <template>
    <child-component @childEvent="handleChildEvent"></child-component>
  </template>

  <script>
  export default {
    methods: {
      handleChildEvent(data) {
        console.log('Received from child:', data);
      }
    }
  }
  </script>

  
  <template>
    <button @click="sendData">Click me</button>
  </template>

  <script>
  export default {
    methods: {
      sendData() {
        this.$emit('childEvent', 'Hello from child');
      }
    }
  }
  </script>
  ```

### 2. **兄弟组件通信**

#### 2.1 使用父组件作为中介
- 通过父组件将数据从一个子组件传递到另一个子组件。子组件 A 通过 `emit` 事件通知父组件，父组件再通过 `props` 将数据传递给子组件 B。

  **示例**：
  ```vue
  
  <template>
    <child-a @messageToB="sendMessageToB"></child-a>
    <child-b :message="messageForB"></child-b>
  </template>

  <script>
  export default {
    data() {
      return {
        messageForB: ''
      };
    },
    methods: {
      sendMessageToB(message) {
        this.messageForB = message;
      }
    }
  }
  </script>
  ```

### 3. **跨级组件通信**

#### 3.1 Provide/Inject
- **`provide` 和 `inject`** 是 Vue 2.2+ 提供的一对 API，用于跨层级传递数据。父组件可以使用 `provide` 来提供数据，任何子组件（不论层级）都可以使用 `inject` 来获取数据。

  **示例**：
  ```vue
  
  <script>
  export default {
    provide() {
      return {
        message: 'Hello from ancestor'
      };
    }
  }
  </script>

  
  <script>
  export default {
    inject: ['message'],
    mounted() {
      console.log(this.message); // 输出 'Hello from ancestor'
    }
  }
  </script>
  ```

### 4. **全局事件总线（Event Bus）**

- **事件总线** 是 Vue 实例上的一个空的 Vue 对象，充当一个全局的事件中心。可以用来触发和监听事件，实现任何组件之间的通信。Vue 3 中建议使用其他更符合现代模式的方式，而不是事件总线。

  **示例**：
  ```javascript
  // event-bus.js
  import Vue from 'vue';
  export const EventBus = new Vue();

  // 组件 A 中触发事件
  EventBus.$emit('eventName', data);

  // 组件 B 中监听事件
  EventBus.$on('eventName', (data) => {
    console.log(data);
  });
  ```

### 5. **Vuex**

- **Vuex** 是 Vue 的状态管理模式，适用于需要在多个组件之间共享状态的场景。它通过全局的状态树管理应用的状态，提供了集中式的状态管理。

  **示例**：
  ```javascript
  // store.js
  export const store = new Vuex.Store({
    state: {
      message: 'Hello from Vuex'
    },
    mutations: {
      updateMessage(state, newMessage) {
        state.message = newMessage;
      }
    }
  });

  // 组件 A 中更改状态
  this.$store.commit('updateMessage', 'New message');

  // 组件 B 中读取状态
  computed: {
    message() {
      return this.$store.state.message;
    }
  }
  ```

### 6. **Ref 和 \$parent / \$children**

- **`$refs`、`$parent` 和 `$children`** 是 Vue 提供的直接访问组件实例的方式。`$refs` 可以用于父组件访问子组件的方法或数据，`$parent` 和 `$children` 则分别用于访问父组件和子组件。

  **示例**：
  ```js
  
  <template>
    <child-component ref="child"></child-component>
    <button @click="accessChildMethod">Call Child Method</button>
  </template>

  <script>
  export default {
    methods: {
      accessChildMethod() {
        this.$refs.child.someMethod();
      }
    }
  }
  </script>

  
  <script>
  export default {
    methods: {
      someMethod() {
        console.log('Method in child called');
      }
    }
  }
  </script>
  ```

### 总结

- **`props` 和 `$emit`**：用于父子组件通信。
- **`provide/inject`**：用于跨层级的组件通信。
- **事件总线（Event Bus）**：适用于兄弟组件或跨组件通信（Vue 3 中建议使用其他方式）。
- **Vuex**：用于全局状态管理，适合复杂的应用。
- **`$refs`、`$parent`、`$children`**：用于直接访问组件实例的方法或数据。

## v-if和v-for的优先级

在 Vue.js 中，`v-if` 和 `v-for` 是两个常用的指令，分别用于条件渲染和列表渲染。理解它们的优先级关系以及为什么不推荐一起使用非常重要。

### `v-if` 和 `v-for` 的优先级

在 Vue.js 中，**`v-for` 的优先级高于 `v-if`**。这意味着当 `v-if` 和 `v-for` 一起使用在同一个元素上时，`v-for` 会首先执行。也就是说，Vue 会先循环遍历数据源，然后在每个循环项上再应用 `v-if` 条件判断。

### 为什么不推荐一起使用？

#### 1. **性能问题**

因为 `v-for` 优先执行，这意味着即使某个项会因为 `v-if` 被过滤掉，Vue 也会先遍历所有项。假设你有一个很大的列表，而 `v-if` 条件又比较严格，结果可能是大部分元素都不会被渲染，但 Vue 仍然会遍历整个列表。这样会造成不必要的性能消耗。

**示例**：

```js
<template>
  <ul>
    <li v-for="item in items" v-if="item.isActive">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [/* 很多数据项 */]
    };
  }
}
</script>
```

在这个例子中，即使 `item.isActive` 为 `false` 的大多数元素都不会显示，Vue 仍然会遍历 `items` 中的每一个元素，进行 `v-if` 判断。这对于大数据集来说可能会导致性能问题。

#### 2. **代码可读性和逻辑清晰性**

将 `v-if` 和 `v-for` 放在一起使用，可能会让代码逻辑变得复杂且难以维护。开发者在理解代码时，需要意识到 `v-for` 会先执行，这增加了理解的难度。

### 推荐的替代方案

为了避免性能问题和保持代码的清晰性，通常建议将 `v-if` 放在 `v-for` 的外面，以过滤掉不符合条件的数据项，然后再进行循环。

**示例**：

```js
<template>
  <ul>
    <li v-for="item in filteredItems">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [/* 数据项 */]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.isActive);
    }
  }
}
</script>
```

在这个改进的例子中，`filteredItems` 预先过滤掉了不需要显示的元素，`v-for` 只会遍历需要渲染的项。这不仅提高了性能，还让代码逻辑更加清晰。

### 总结

- **`v-for` 的优先级高于 `v-if`**，即 `v-for` 会先执行。
- **不推荐一起使用**，因为会导致性能问题和降低代码可读性。
- **推荐做法**是将 `v-if` 放在 `v-for` 外部，使用计算属性或过滤器来提前过滤数据。

## Vue的生命周期

Vue.js 的生命周期指的是一个 Vue 实例从创建到销毁的过程中的各个阶段。Vue 提供了多个生命周期钩子函数，允许开发者在这些特定的时机执行相应的代码。理解 Vue 的生命周期有助于我们在正确的时机执行代码，从而更好地管理应用的状态、性能以及资源。

### Vue 实例的生命周期流程

Vue 实例的生命周期大致分为四个阶段：
1. **创建阶段**
2. **挂载阶段**
3. **更新阶段**
4. **销毁阶段**

### 详细的生命周期钩子函数

#### 1. **创建阶段**

- **`beforeCreate`**：
  - 在实例初始化之后，数据观测（reactivity）和事件/生命周期事件尚未设置完成时调用。
  - 此时 `data` 和 `methods` 等属性还未被初始化，无法访问 `data`、`computed` 等。

  ```javascript
  beforeCreate() {
    console.log('beforeCreate: 初始化数据之前');
  }
  ```

- **`created`**：
  - 实例已经创建完成，此时可以访问 `data`、`methods`、`computed` 和 `watch` 等属性，但还没有开始挂载，`$el` 属性还不可用。
  - 适合在此时进行初始化数据操作、调用 API 等。

  ```javascript
  created() {
    console.log('created: 实例已创建');
    this.fetchData();
  }
  ```

#### 2. **挂载阶段**

- **`beforeMount`**：
  - 在挂载开始之前调用，此时模板已经编译完成，但尚未挂载到 DOM 上。
  - 在这个阶段 `render` 函数第一次被调用。

  ```javascript
  beforeMount() {
    console.log('beforeMount: 挂载之前');
  }
  ```

- **`mounted`**：
  - 实例挂载完成后调用，DOM 已经生成，`$el` 可以被访问。
  - 常用于执行需要访问 DOM 元素的操作，例如初始化第三方插件等。

  ```javascript
  mounted() {
    console.log('mounted: 挂载完成');
    this.initializePlugin();
  }
  ```

#### 3. **更新阶段**

- **`beforeUpdate`**：
  - 数据更新时调用，但尚未进行 DOM 更新。可以在这里获取更新前的 DOM 状态。
  
  ```javascript
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新前');
  }
  ```

- **`updated`**：
  - 数据更新并重新渲染 DOM 后调用，此时 DOM 已经更新，可以执行与 DOM 相关的操作。
  - 在更新完成后使用此钩子可能会导致性能问题，因为会触发多次渲染。

  ```javascript
  updated() {
    console.log('updated: 数据更新后');
  }
  ```

#### 4. **销毁阶段**

- **`beforeDestroy`**：
  - 实例销毁之前调用，此时实例仍然完全可用。适合在此时清理定时器、事件监听器等资源。
  
  ```javascript
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁前');
  }
  ```

- **`destroyed`**：
  - 实例销毁后调用，此时所有的绑定和实例都已解除，无法访问实例的属性和方法。
  
  ```javascript
  destroyed() {
    console.log('destroyed: 实例已销毁');
  }
  ```

### 总结

- **创建阶段**：`beforeCreate` 和 `created`，初始化实例。
- **挂载阶段**：`beforeMount` 和 `mounted`，挂载 DOM。
- **更新阶段**：`beforeUpdate` 和 `updated`，响应数据变化。
- **销毁阶段**：`beforeDestroy` 和 `destroyed`，清理实例。

## 双向绑定

在 Vue.js 中，双向绑定通常通过 `v-model` 指令实现。`v-model` 绑定在表单元素上，可以在数据模型和视图之间建立一个自动的双向数据流。

#### 基本用法

```js
<template>
  <div>
    <input v-model="message" placeholder="Enter a message">
    <p>The message is: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
}
</script>
```

在这个示例中：

- `v-model="message"` 绑定了输入框的值和数据模型中的 `message` 属性。
- 当用户在输入框中输入内容时，`message` 的值会自动更新。
- 同时，`message` 的值更新时，页面上显示的 `p` 标签内容也会自动更新。

#### 工作原理

- **输入到模型**：当用户在输入框中输入内容时，Vue 捕捉到输入事件并自动更新绑定的模型数据。
- **模型到视图**：当模型数据发生变化时，Vue 自动更新视图中的输入框值或其他绑定了 `v-model` 的元素。

### 双向绑定的优点

1. **简化代码**：双向绑定简化了视图和模型之间的交互，开发者不再需要手动编写监听器或事件处理函数来更新模型和视图。
2. **提高开发效率**：由于视图和模型可以自动同步，开发者可以更专注于业务逻辑而不是处理界面更新的细节。
3. **数据驱动视图**：双向绑定是数据驱动视图的体现，视图的展示由数据决定，增强了代码的可维护性。

### 双向绑定的实现机制

在 Vue.js 中，双向绑定背后是通过数据劫持（`Object.defineProperty` 或 `Proxy`）实现的。Vue 监听数据的变化，并在数据变化时自动更新相关的 DOM 元素。

### 双向绑定的应用场景

- **表单输入**：在处理用户输入时，双向绑定非常有用，可以简化数据的收集和验证过程。
- **实时显示输入结果**：比如即时搜索、数据校验等功能，用户输入时实时更新和反馈。

### 双向绑定的潜在问题

- **性能开销**：在大量数据或复杂的数据结构中使用双向绑定，可能会导致性能问题，因为 Vue 需要对数据进行深度监听。
- **调试复杂性**：当数据变化自动触发视图更新时，可能会导致调试困难，特别是在数据流不清晰的情况下。

VUE 问题笔记

REACT 问题笔记

## var，let，const的区别

- var可以重复声明，let不可以重复声明
- var不受限于块级，let受限于块级
- var会跟window相映射
- const声明后必须赋值，赋值后不可修改
- var可以在声明的上方访问变量，let不可

## 使用箭头函数的注意事项

1. this不再指向window，而是指向父级
2. 不能使用arguments
3. 不能用作构造函数
4. 不能使用yield命令

## 模板字符串

ES6 中引入的模板字符串（Template Literals），又称模板字面量，是一种提供了更强大和灵活的字符串操作功能的语法。与传统的字符串拼接方式相比，模板字符串更为简洁和易读，特别是在需要插入变量、多行字符串或进行复杂操作时。

### 基本语法

模板字符串使用反引号（`` ` ``）来定义，而不是传统的单引号（`'`）或双引号（`"`）。在模板字符串中，可以直接嵌入表达式、变量或函数的返回值，使用 `${}` 语法。

**示例：**

```javascript
const name = 'John';
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // 输出: Hello, my name is John and I am 30 years old.
```

### 多行字符串

在传统的 JavaScript 中，要创建多行字符串，通常需要使用字符串拼接或转义字符 `\n`。而在模板字符串中，直接回车换行即可实现多行字符串，非常直观。

**示例：**

```javascript
const multiLineString = `This is a string
that spans across
multiple lines.`;

console.log(multiLineString);
/*
输出:
This is a string
that spans across
multiple lines.
*/
```

### 表达式插值

模板字符串不仅可以嵌入变量，还可以在 `${}` 中直接执行表达式，包括算术运算、函数调用、三元运算符等。

**示例：**

```javascript
const a = 10;
const b = 20;
const sum = `The sum of a and b is ${a + b}.`;

console.log(sum); // 输出: The sum of a and b is 30.
```

### 嵌套模板字符串

在模板字符串内部，也可以嵌套其他的模板字符串，从而实现更复杂的字符串构建。

**示例：**

```javascript
const user = {
    name: 'Alice',
    age: 25,
};

const greeting = `Hello, ${user.name}. You are ${user.age} years old, which is ${user.age >= 18 ? 'an adult' : 'not an adult'}.`;

console.log(greeting); // 输出: Hello, Alice. You are 25 years old, which is an adult.
```

### 标签模板（Tagged Templates）

标签模板是一种高级用法，允许在模板字符串的生成过程中调用一个函数，并且将模板字符串中的字符串部分和表达式部分分别传递给该函数进行处理。

**语法：**

```javascript
function tag(strings, ...values) {
    // strings 是一个数组，包含模板字符串中的静态文本部分
    // values 是一个数组，包含插值表达式的值
    return `${strings[0]}${values[0]}${strings[1]}${values[1]}...`;
}

const name = 'John';
const age = 30;
const result = tag`Name: ${name}, Age: ${age}`;

console.log(result); // 输出由 tag 函数定义的结果
```

**示例：**

```javascript
function highlight(strings, ...values) {
    return strings.reduce((result, str, i) => {
        return `${result}${str}<span class="highlight">${values[i] || ''}</span>`;
    }, '');
}

const name = 'John';
const age = 30;
const result = highlight`Name: ${name}, Age: ${age}`;

console.log(result); 
// 输出: Name: <span class="highlight">John</span>, Age: <span class="highlight">30</span>
```

### 原始字符串（Raw Strings）

模板字符串中的特殊字符，如换行符或反斜杠，通常会被自动处理。如果需要获取原始的未转义字符串，可以使用 `String.raw` 标签函数。

**示例：**

```javascript
const path = String.raw`C:\Development\project\file.txt`;

console.log(path); // 输出: C:\Development\project\file.txt
```

## set map的区别

在 JavaScript 中，`Set` 和 `Map` 是两种新引入的数据结构，分别用于存储独特的值和键值对。虽然它们都有一些相似之处，比如都能存储任意类型的数据并且是可迭代的，但它们在用途和操作上有很大的区别。以下是 `Set` 和 `Map` 的详细比较：

### 1. **定义和用途**

- **`Set`**：
  - `Set` 是一种数据结构，用于存储唯一的值。它类似于数组，但不同的是 `Set` 中的每个值都是唯一的，不能重复。
  - 常用于存储一组无重复的元素，或者用于移除数组中的重复项。

  ```javascript
  const set = new Set([1, 2, 3, 4, 4]); // 重复的 4 只会存储一次
  console.log(set); // 输出: Set { 1, 2, 3, 4 }
  ```

- **`Map`**：
  - `Map` 是一种数据结构，用于存储键值对。与普通对象不同，`Map` 的键可以是任意类型，包括对象、函数、基本类型等。
  - 常用于存储与某个键关联的值，特别是在需要使用复杂键（如对象）时。

  ```javascript
  const map = new Map();
  map.set('name', 'John');
  map.set({ key: 'age' }, 30);
  console.log(map); // 输出: Map { 'name' => 'John', { key: 'age' } => 30 }
  ```

### 2. **键与值**

- **`Set`**：
  - `Set` 中只存储值，没有键。每个值都是唯一的，不允许重复。
  - `Set` 的值可以是任意类型，包括对象、函数、基本类型等。

  ```javascript
  const set = new Set();
  set.add(1);
  set.add(2);
  set.add(1); // 重复的值不会添加
  console.log(set); // 输出: Set { 1, 2 }
  ```

- **`Map`**：
  - `Map` 中存储的是键值对，每个键都是唯一的。
  - 键可以是任意类型，包括对象、函数、基本类型等，且与其关联的值也可以是任意类型。

  ```javascript
  const map = new Map();
  map.set('key1', 'value1');
  map.set({}, 'value2');
  console.log(map); // 输出: Map { 'key1' => 'value1', {} => 'value2' }
  ```

### 3. **常用方法和属性**

- **`Set`**：
  - `add(value)`：向 `Set` 中添加一个值。
  - `delete(value)`：从 `Set` 中删除指定值。
  - `has(value)`：检查 `Set` 中是否存在某个值。
  - `clear()`：清空 `Set` 中的所有值。
  - `size`：返回 `Set` 中值的个数。

  ```javascript
  const set = new Set();
  set.add(1);
  set.add(2);
  console.log(set.has(1)); // 输出: true
  set.delete(1);
  console.log(set.size); // 输出: 1
  set.clear();
  console.log(set.size); // 输出: 0
  ```

- **`Map`**：
  - `set(key, value)`：向 `Map` 中添加或更新一个键值对。
  - `get(key)`：返回 `Map` 中与指定键关联的值。
  - `delete(key)`：从 `Map` 中删除指定键对应的键值对。
  - `has(key)`：检查 `Map` 中是否存在某个键。
  - `clear()`：清空 `Map` 中的所有键值对。
  - `size`：返回 `Map` 中键值对的个数。

  ```javascript
  const map = new Map();
  map.set('key1', 'value1');
  map.set('key2', 'value2');
  console.log(map.get('key1')); // 输出: value1
  map.delete('key1');
  console.log(map.has('key1')); // 输出: false
  console.log(map.size); // 输出: 1
  map.clear();
  console.log(map.size); // 输出: 0
  ```

### 4. **迭代**

- **`Set`**：
  - `Set` 是可迭代的，可以使用 `for...of` 循环直接遍历它的值。
  - 提供了 `keys()`、`values()` 和 `entries()` 方法，但 `keys()` 和 `values()` 返回相同的迭代器（因为 `Set` 没有键）。

  ```javascript
  const set = new Set([1, 2, 3]);
  for (let value of set) {
    console.log(value);
  }
  // 输出:
  // 1
  // 2
  // 3
  ```

- **`Map`**：
  - `Map` 也是可迭代的，可以使用 `for...of` 循环直接遍历它的键值对。
  - 提供了 `keys()`、`values()` 和 `entries()` 方法，分别用于获取键、值和键值对的迭代器。

  ```javascript
  const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
  for (let [key, value] of map) {
    console.log(`${key} = ${value}`);
  }
  // 输出:
  // key1 = value1
  // key2 = value2
  ```

### 5. **性能考虑**

- **`Set`**：
  - 在处理大量去重操作或需要快速查找某个元素时，`Set` 通常比数组更有效率。
  
- **`Map`**：
  - 在处理大量键值对，特别是需要复杂键（如对象）时，`Map` 比对象更高效且更直观。

## Promise相关

在 JavaScript 中，`Promise` 是一种用于处理异步操作的对象。`Promise` 对象代表了一个异步操作的最终结果，它有三种状态：

### Promise 的三种状态

1. **`pending`（待定状态）**：
   - 初始状态，表示 `Promise` 还未完成，也未被拒绝。在这个状态下，异步操作尚未完成，`Promise` 的结果未知。
   - 处于 `pending` 状态的 `Promise` 会等待异步操作的结果，直到状态转换为 `fulfilled` 或 `rejected`。

2. **`fulfilled`（已成功状态）**：
   - 表示异步操作成功完成，`Promise` 被解决（resolved）。在这个状态下，`Promise` 会携带操作成功的结果值。
   - 当 `Promise` 状态变为 `fulfilled` 时，`then` 方法中注册的成功回调函数（第一个参数）会被调用。

3. **`rejected`（已拒绝状态）**：
   - 表示异步操作失败，`Promise` 被拒绝（rejected）。在这个状态下，`Promise` 会携带操作失败的原因（通常是一个错误对象）。
   - 当 `Promise` 状态变为 `rejected` 时，`catch` 方法（或 `then` 方法的第二个参数）中的回调函数会被调用。

### 何时会进入 `catch`

`catch` 方法是用来处理 `Promise` 被拒绝的情况，也就是说，当 `Promise` 状态变为 `rejected` 时，`catch` 方法会被调用。

以下是一些典型的场景，`Promise` 会进入 `catch`：

1. **显式拒绝（调用 `reject`）**：
   - 当你在 `Promise` 构造函数中的异步操作遇到错误时，调用 `reject` 函数来拒绝 `Promise`。
   
   ```javascript
   const promise = new Promise((resolve, reject) => {
       const success = false;
       if (!success) {
           reject('Operation failed');
       }
   });

   promise.catch(error => {
       console.error(error); // 输出: Operation failed
   });
   ```

2. **抛出异常**：
   - 如果在 `Promise` 构造函数的同步代码或 `then` 方法的回调函数中抛出了一个错误或异常，`Promise` 将自动捕获这个错误并将状态变为 `rejected`，从而触发 `catch`。
   
   ```javascript
   const promise = new Promise((resolve, reject) => {
       throw new Error('Something went wrong');
   });

   promise.catch(error => {
       console.error(error); // 输出: Error: Something went wrong
   });
   ```

3. **链式调用中的错误**：
   - 如果在 `then` 链式调用中的某一个 `then` 回调函数抛出异常，后续的 `catch` 会捕获这个错误。
   
   ```javascript
   const promise = new Promise((resolve) => {
       resolve('Success');
   });

   promise
       .then(result => {
           console.log(result); // 输出: Success
           throw new Error('Error in then');
       })
       .catch(error => {
           console.error(error); // 输出: Error: Error in then
       });
   ```

4. **返回的 `Promise` 被拒绝**：
   - 如果 `then` 回调函数中返回的 `Promise` 最终被拒绝，后续的 `catch` 也会捕获这个错误。
   
   ```javascript
   const promise = new Promise((resolve) => {
       resolve('Initial success');
   });

   promise
       .then(result => {
           return new Promise((resolve, reject) => {
               reject('Failure in second promise');
           });
       })
       .catch(error => {
           console.error(error); // 输出: Failure in second promise
       });
   ```

### 总结

- `Promise` 有三种状态：`pending`（待定）、`fulfilled`（已成功）、`rejected`（已拒绝）。
- `Promise` 会在以下情况进入 `catch`：
  1. 显式调用 `reject`。
  2. 构造函数或回调函数中抛出异常。
  3. 链式调用中的某个 `then` 回调函数抛出异常。
  4. `then` 回调函数中返回的 `Promise` 被拒绝。

使用 `catch` 方法可以有效处理异步操作中的错误和异常，确保代码在面对不可预见的错误时能够稳健地运行。

ES6 问题笔记

## Flex布局


Flexbox（Flexible Box Layout）是一种用于在网页布局中分配空间并对齐内容的CSS布局模式。与传统的布局方式（如 `float` 或 `inline-block`）相比，Flexbox 更加灵活且易于控制，特别适合用于创建复杂的布局结构。

### 基本概念

Flexbox布局涉及两个主要的元素：

1. **Flex 容器（Flex Container）**：包含 Flex 子元素的父元素。可以通过设置 `display: flex;` 或 `display: inline-flex;` 将一个元素定义为 Flex 容器。

2. **Flex 项目（Flex Items）**：容器内的子元素，它们将按照 Flexbox 布局规则排列。

### 主要属性

Flexbox 布局中有几个关键的属性来控制容器和项目的行为：

#### 容器属性

1. **`display`**：
   - `display: flex;`：定义一个块级的 Flex 容器。
   - `display: inline-flex;`：定义一个内联级的 Flex 容器。

2. **`flex-direction`**：
   - 决定 Flex 项目的主轴方向（项目的排列方向）。
   - 可能的值：
     - `row`（默认值）：主轴为水平方向，项目从左到右排列。
     - `row-reverse`：主轴为水平方向，项目从右到左排列。
     - `column`：主轴为垂直方向，项目从上到下排列。
     - `column-reverse`：主轴为垂直方向，项目从下到上排列。

3. **`justify-content`**：
   - 决定项目在主轴上的对齐方式。
   - 可能的值：
     - `flex-start`（默认值）：项目从主轴的起点开始。
     - `flex-end`：项目从主轴的终点开始。
     - `center`：项目居中对齐。
     - `space-between`：项目在主轴上平均分布，第一个项目在起点，最后一个项目在终点。
     - `space-around`：项目在主轴上平均分布，每个项目两侧的间距相等。

4. **`align-items`**：
   - 决定项目在交叉轴（与主轴垂直的方向）上的对齐方式。
   - 可能的值：
     - `flex-start`：项目在交叉轴的起点对齐。
     - `flex-end`：项目在交叉轴的终点对齐。
     - `center`：项目在交叉轴上居中对齐。
     - `baseline`：项目的基线对齐。
     - `stretch`（默认值）：项目在交叉轴上拉伸以填满容器（如果未设置高度）。

5. **`flex-wrap`**：
   - 决定当 Flex 容器内空间不足时，项目是否换行。
   - 可能的值：
     - `nowrap`（默认值）：所有项目保持在一行内。
     - `wrap`：项目按行排列，当一行空间不足时换到下一行。
     - `wrap-reverse`：与 `wrap` 类似，但换行的顺序反向。

6. **`align-content`**：
   - 用于在多行布局中对齐各行。
   - 可能的值与 `align-items` 类似，但它作用于多行布局。

#### 项目属性

1. **`flex-grow`**：
   - 定义项目的增长因子，即当存在剩余空间时，项目如何分配这些空间。
   - 默认值为 `0`（不增长），可以设置为正数，值越大，分配的空间越多。

2. **`flex-shrink`**：
   - 定义项目的缩小因子，即当空间不足时，项目如何缩小。
   - 默认值为 `1`，可以设置为正数，值越大，项目缩小得越多。

3. **`flex-basis`**：
   - 定义项目在主轴方向上的初始大小。
   - 可以是长度单位（如 `px`, `em`, `%`）或 `auto`。

4. **`align-self`**：
   - 允许单个项目覆盖容器的 `align-items` 属性，控制该项目在交叉轴上的对齐方式。
   - 可能的值与 `align-items` 相同，如 `flex-start`，`flex-end`，`center`，`baseline`，`stretch`。

## 可见性和布局的比较

| 属性               | 是否可见 | 占据空间 | 响应事件 | 适用场景 |
|--------------------|----------|----------|----------|----------|
| `opacity: 0`       | 否       | 是        | 是        | 动画效果，保留布局和交互 |
| `visibility: hidden`| 否       | 是        | 否        | 保留布局，但不交互 |
| `display: none`    | 否       | 否        | 否        | 完全隐藏元素，移除布局 |

### 使用建议
- **`opacity: 0`**：适用于需要隐藏元素但仍希望其保留在布局中且可响应事件的场景，如动画效果。只会导致单个元素重绘，消耗较小。
- **`visibility: hidden`**：适用于隐藏元素但需要保留其布局空间的场景，不希望元素参与交互。只会导致单个元素重绘，消耗较小。
- **`display: none`**：适用于需要彻底移除元素并不保留其布局空间的场景，如切换视图或动态移除元素。改变会导致文本回流，性能开销比较大。

### 继承属性

`opacity: 0`：子元素继承透明度，所有元素不可见但仍然占据空间并响应事件。可以用于需要保留布局和交互的情况。

`visibility: hidden`：子元素继承不可见性，但仍然占据空间且不会响应事件。可以通过子元素单独设置 `visibility: visible` 来覆盖继承的不可见性。

`display: none`：子元素不会继承这一属性，但它们随着父元素一起从文档流中移除，不占据空间也不响应事件。适用于需要彻底隐藏父元素及其所有子元素的情况。


## 粘性布局 Sticky

粘性布局（Sticky Layout）是CSS中一种用于定位元素的布局方式，通过`position: sticky;`来实现。它结合了相对定位和固定定位的特性，使得元素在页面滚动时可以保持在特定位置，直到它到达指定的阈值位置后，再随着页面的滚动而滚动。这种布局方式非常适合在页面滚动时，让元素（如导航栏、标题等）在视口中保持可见。

### 工作原理

`position: sticky;` 的行为主要依赖于两个因素：

1. **滚动容器**：`sticky` 元素的粘性定位是相对于最近的可滚动祖先元素（通常是`overflow`设置为`auto`或`scroll`的元素）或视口的。

2. **粘性阈值（阈值位置）**：通过 `top`、`right`、`bottom`、`left` 等属性设置粘性元素的粘性阈值。当页面滚动使得元素触及这个阈值时，元素会“粘住”在这个位置，并在超过阈值后继续随页面滚动。

### 例子

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Layout Example</title>
<style>
  .container {
    height: 1500px;
    padding: 10px;
  }

  .sticky-header {
    position: sticky;
    top: 0; /* 当滚动到距离顶部 0 的位置时，元素将粘性定位 */
    background-color: lightblue;
    padding: 10px;
    font-size: 20px;
  }

  .content {
    margin-top: 10px;
    height: 1300px;
    background-color: lightcoral;
  }
</style>
</head>
<body>

<div class="container">
  <div class="sticky-header">我是一个粘性标题</div>
  <div class="content">滚动内容区域...</div>
</div>

</body>
</html>
```

在这个例子中，当页面滚动时，`.sticky-header` 元素会在接近视口顶部时“粘住”，保持在视口顶部，直到其容器的底部滚出视口。

### 粘性布局的优点

1. **用户体验**：粘性布局可以帮助用户在长页面上更方便地访问固定内容，比如导航栏或提示信息。
  
2. **简单易用**：只需几行CSS代码就可以实现复杂的固定效果，而不需要借助JavaScript或其他手段。

3. **灵活性**：通过设置不同的 `top`、`bottom`、`left`、`right` 等属性，粘性布局可以应用于各种不同的场景，比如固定在顶部、底部或侧边。

### 注意事项

1. **浏览器支持**：`position: sticky;` 得到广泛的浏览器支持，但在某些旧版本的浏览器中可能不完全支持。

2. **父容器的 `overflow` 设置**：如果父容器的 `overflow` 属性设置为 `hidden`、`scroll` 或 `auto`，`sticky` 元素的行为可能会受到影响。

3. **粘性元素的大小**：粘性元素不能超出其滚动容器的边界。如果 `sticky` 元素的高度超过其容器的高度，粘性效果可能无法正常工作。

### 使用场景

- **固定导航栏**：在长页面中，保持导航栏在视口顶部，方便用户随时访问不同部分。
- **浮动提示**：在特定内容旁边显示浮动提示信息，当页面滚动时，提示信息依然可见。
- **表格标题**：在大表格中，保持表头在视口顶部，方便用户查看数据。

粘性布局在需要保持元素在视口内固定显示的场景中非常有用，简化了许多UI设计需求，且实现起来相对简单。

## CSS3 新增内容

CSS3 是 CSS 的一个重要更新版本，引入了大量的新特性和模块，使得网页设计和开发更加灵活和强大。以下是 CSS3 中新增的一些主要功能和特性：

### 1. **选择器**
CSS3 引入了更多强大的选择器，使得开发者可以更精确地选择 DOM 元素。

- **属性选择器**：可以根据属性及其值来选择元素。
  - `[attr]`：选择具有指定属性的元素。
  - `[attr=value]`：选择具有指定属性且属性值等于某个值的元素。
  - `[attr^=value]`：选择属性值以某个值开头的元素。
  - `[attr$=value]`：选择属性值以某个值结尾的元素。
  - `[attr*=value]`：选择属性值包含某个值的元素。

- **伪类选择器**：
  - `:nth-child()`：选择属于父元素的第 N 个子元素。
  - `:nth-of-type()`：选择属于父元素的特定类型的第 N 个子元素。
  - `:first-child`、`:last-child`：选择父元素的第一个或最后一个子元素。
  - `:not(selector)`：选择所有不匹配某个选择器的元素。

### 2. **媒体查询**
媒体查询使得响应式设计成为可能，允许根据不同的设备和视口尺寸应用不同的样式。

```css
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
```

### 3. **动画与过渡**
CSS3 引入了动画和过渡效果，使得网页交互更加生动和动态。

- **过渡（Transitions）**：
  - 允许属性值的变化在一定时间内平滑地过渡。
  ```css
  div {
    transition: background-color 0.5s ease;
  }
  ```

- **动画（Animations）**：
  - 通过定义关键帧（`@keyframes`），可以实现复杂的动画效果。
  ```css
  @keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
  }

  div {
    animation: example 5s infinite;
  }
  ```

### 4. **布局模块**
CSS3 增加了几种强大的布局模型，使布局更加灵活和简便。

- **Flexbox**：
  - 用于一维布局，特别适合处理动态或未知大小的项目。
  ```css
  .container {
    display: flex;
    justify-content: space-between;
  }
  ```

- **Grid Layout**：
  - 用于二维布局，允许在行和列之间创建复杂的布局。
  ```css
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  ```

### 5. **边框与背景**
CSS3 提供了更多关于边框和背景的选项，使得设计更加多样化。

- **边框半径（`border-radius`）**：
  - 允许创建圆角边框。
  ```css
  div {
    border-radius: 10px;
  }
  ```

- **背景图像（`background-image`）的增强**：
  - 允许设置多重背景。
  ```css
  div {
    background-image: url(image1.png), url(image2.png);
  }
  ```

- **渐变（Gradients）**：
  - 允许创建线性渐变和径向渐变。
  ```css
  div {
    background: linear-gradient(to right, red, yellow);
  }
  ```

### 6. **文本效果**
CSS3 增加了许多新的文本样式和效果。

- **阴影（Text Shadow）**：
  - 允许给文本添加阴影效果。
  ```css
  h1 {
    text-shadow: 2px 2px 5px grey;
  }
  ```

- **字体（@font-face）**：
  - 允许使用自定义字体。
  ```css
  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff');
  }

  body {
    font-family: 'MyFont', sans-serif;
  }
  ```

### 7. **多列布局**
CSS3 引入了多列布局，允许将文本分成多列排列。

```css
div {
  column-count: 3;
  column-gap: 20px;
}
```

### 8. **用户界面样式**
CSS3 提供了更多控制用户界面的样式选项。

- **`box-sizing`**：控制如何计算元素的宽度和高度。
  ```css
  div {
    box-sizing: border-box;
  }
  ```

- **`resize`**：允许用户调整元素的大小。
  ```css
  textarea {
    resize: both;
  }
  ```

- **`outline`**：用于绘制围绕元素的轮廓线，与 `border` 不同，不占据空间。
  ```css
  div {
    outline: 2px solid blue;
  }
  ```

### 9. **色彩和不透明度**
CSS3 引入了 `rgba()` 和 `hsla()` 颜色模式以及 `opacity` 属性，支持更复杂的色彩和透明度效果。

- **`rgba()`**：定义具有透明度的 RGB 颜色。
  ```css
  div {
    background-color: rgba(255, 0, 0, 0.5);
  }
  ```

- **`opacity`**：设置元素的不透明度。
  ```css
  div {
    opacity: 0.5;
  }
  ```

### 10. **新伪类与伪元素**
CSS3 引入了更多伪类和伪元素，增强了对 DOM 元素的选择和操作。

- **伪类**：
  - `:nth-child()`、`:nth-last-child()`、`:first-of-type`、`:last-of-type` 等。

- **伪元素**：
  - `::before`、`::after`：可以在元素内容的前后插入内容。

## z-index失效

以下情况会造成z-index失效：

1. 父元素是relative
2. position是static
3. 使用了float

## CSS加载与阻塞

- CSS加载不会阻塞dom树的解析
- CSS加载会阻塞dom树的渲染
- CSS加载会阻塞后面JS语句的执行

为了提高加载速度，可以有以下解决方法：

- 使用CDN
- 压缩CSS
- 合理使用缓存 cache-control expires e-tag
- 减少http请求数（合并CSS或者写成内联式）

## 浏览器渲染流程

1. HTML解析，生成DOM树。解析CSS文件，生成CSS DOM树
2. 将DOM树和CSS DOM树结合生成RENDER树。
3. 根据RENDER树进行渲染绘制。

DOM解析和CSS解析是两个并行的过程。RENDER树是依赖于CSS DOM树的，因此它会被CSS解析阻塞。