## 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解析阻塞。