知识盲点集合笔记记录在这里方便查看

### 知识点一：Vue 组件间的数据传递 #### 1.1 Vue 父组件给子组件传值 **问题描述**：在 Vue 应用程序中，父组件向子组件传递数据时，子组件接收数据后，如果父组件的数据发生变化，子组件的数据未能及时更新。 **原因分析**： - 子组件内部将父组件传来的值存储到局部变量（如 `childData`）中。 - 当父组件的值更新时，子组件没有同步更新该局部变量。 **解决方案**： 1. **直接使用父组件数据**：最佳实践是直接在子组件模板中使用父组件传递的数据（例如，直接使用 `parentData`），这样可以利用 Vue 的响应式机制实现数据的实时更新。 2. **使用 `watch` 或 `computed`**： - **使用 `watch`**：监听父组件传递的数据变化，并在数据改变时更新子组件内部的状态。 ```javascript watch: { parentData(newVal) { this.childData = newVal; } } ``` - **使用 `computed`**：将子组件中的数据声明为计算属性，并直接返回父组件传递的数据值。 ```javascript computed: { childData() { return this.parentData; } } ``` #### 1.2 Vue 兄弟组件间的通信 **解决方式**： 1. **通过父组件中转**：利用父组件作为中间人，实现兄弟组件之间的数据传递。 2. **使用事件总线**：创建一个全局的事件中心（通常称为“事件总线”或“bus”），兄弟组件之间可以通过发布和订阅事件的方式进行通信。 **示例代码**： - **创建事件总线** (`Bus.js`) ```javascript import Vue from 'vue'; export default new Vue(); ``` - **子组件 A 发布事件** ```javascript import Bus from "../api/Bus"; methods: { a() { Bus.$emit("bbb", this.aa++); } } ``` - **子组件 B 订阅事件** ```javascript import Bus from "../api/Bus"; created() { Bus.$on("bbb", (val) => { this.dd = val; }); } ``` ### 知识点二：Vue 数据双向绑定与 Diff 算法 #### 2.1 Vue 的响应式原理（数据双向绑定） Vue 实现了数据的双向绑定，即数据模型和用户界面之间的双向同步。这主要得益于 Vue 内部的响应式系统，它能自动追踪数据依赖并在数据变化时更新 DOM。 **核心概念**： - **数据劫持**：Vue 通过 Object.defineProperty() 方法对数据对象进行深度遍历，为每个属性设置 getter 和 setter，从而实现数据的响应式。 - **依赖收集**：当某个属性被读取时，Vue 会自动收集该属性的依赖关系。 - **依赖更新**：当数据发生变化时，对应的 watcher 会被触发，进而更新 DOM。 #### 2.2 Vue 中数组改变的渲染行为 Vue 对数组的改变有特定的支持，但不是所有的操作都能被检测到。以下操作是可以被 Vue 检测并正确渲染的： - 使用 `splice`、`push`、`pop`、`shift`、`unshift`、`sort`、`reverse` 方法。 - 使用 `Vue.set` 或 `this.$set` 添加新的响应式属性。 **注意事项**： - 直接修改数组的索引或长度，如 `vm.items[index] = newValue` 或 `vm.items.length = newLength`，不会触发视图更新。 - 当添加或删除数组中的元素时，Vue 可能无法正确识别元素的位置变化，这时需要借助于 Vue 提供的方法来确保视图的正确更新。 #### 2.3 加载数据的时间点选择 **`created` 钩子**： - 在实例创建完成后被立即调用。 - 此时还未挂载 DOM，因此不能访问 `$el`。 **`mounted` 钩子**： - 在挂载完成后被调用。 - 可以访问 `$el`。 **建议**： - 如果数据加载与 DOM 无关，可以考虑在 `created` 钩子中进行。 - 如果数据加载需要根据 DOM 结构进行，或者需要在页面完全显示后再进行数据加载，则应在 `mounted` 钩子中进行。 ### 知识点三：Vue Router 的使用 #### 3.1 Vue Router 的基本概念 **Vue Router** 是 Vue.js 官方的路由管理器。它与 Vue.js 的核心深度集成，让构建单页应用变得易如反掌。 **主要组成部分**： - **`router` 对象**：路由对象，用于定义路由规则。 - **`$router` 对象**：全局路由的实例，提供导航相关的 API。 - **`$route` 对象**：当前活跃的路由对象，包含了当前路由的相关信息。 #### 3.2 Vue Router 导航方法 - **`push()`**：将当前路由推入历史栈中，方便用户使用浏览器的前进/后退按钮。 - **`replace()`**：替换当前路由，不向历史栈添加新记录。 - **`go()`**：前进或后退指定的步数。 #### 3.3 Vue Router 的模式 **Hash 模式**： - URL 以 `#` 开头，不会发送到服务器。 - 改变 URL 的哈希值不会重新加载页面。 - 适用于所有浏览器环境，兼容性好。 **History 模式**： - 使用 HTML5 的 History API。 - 需要服务器配置支持，以便处理 404 错误。 - 更加美观且用户体验更好。 ### 总结 以上内容涵盖了 Vue.js 中组件间通信的关键知识点，包括父组件向子组件传值的问题及解决方法、兄弟组件间通信的两种常用方式、数据双向绑定的基本原理、Vue Router 的核心概念以及如何正确选择加载数据的时间点等。这些知识点对于深入理解和使用 Vue.js 非常关键，有助于开发者更高效地构建复杂的应用程序。