vue

vue 双向绑定原理

Vue 的双向绑定是其核心特性之一，它使得数据模型（Model）和视图（View）之间的同步变得非常简单。简单来说，双向绑定意味着当数据模型发生变化时，视图会自动更新；反之，当视图发生变化时，数据模型也会自动更新。

Vue 2 的双向绑定原理

Vue 2 的双向绑定主要依赖于以下几个核心概念：

1. 数据劫持（Object.defineProperty）：

   • Vue 2 使用 Object.defineProperty 来劫持对象属性的 getter 和 setter。
   • 当对象属性被访问时，getter 会被调用，用于收集依赖（Watcher）。
   • 当对象属性被修改时，setter 会被调用，用于通知依赖更新。

2. 依赖收集（Dependency Collection）：

   • 每个组件实例都有一个 Watcher 实例，用于监听数据的变化。
   • 当渲染组件时，会触发数据对象的 getter，此时会收集当前 Watcher 实例到依赖列表中。
   • 依赖列表记录了哪些 Watcher 实例依赖于该数据。

3. 发布-订阅模式（Publish-Subscribe Pattern）：

   • 当数据对象被修改时，会触发 setter，setter 会通知依赖列表中的所有 Watcher 实例。
   • Watcher 实例收到通知后，会重新渲染组件，更新视图。

4. 指令系统（Directives）：

   • v-model 是 Vue 中用于实现双向绑定的指令。
   • v-model 会根据表单元素的不同，自动选择合适的事件来监听视图的变化，例如 input、change 等。

Vue 3 的双向绑定原理

Vue 3 使用 Proxy 替代了 Object.defineProperty，Proxy 提供了更强大的数据劫持能力。

1. Proxy：

   • Proxy 可以监听对象的所有操作，包括属性的读取、设置、删除等。
   • Proxy 的性能比 Object.defineProperty 更好，因为它不需要遍历对象的所有属性。

2. 响应式系统（Reactivity System）：

   • Vue 3 的响应式系统更加高效和灵活。
   • 它使用 track 和 trigger 函数来管理依赖关系。
   • track函数用于追踪依赖，trigger函数用于触发更新。

3. v-model 的改进：

   • Vue3 中，在使用组件的 v-model 时，父组件可以通过向子组件传递一个名为modelValue的prop，并触发子组件的update:modelValue事件，来和子组件进行双向绑定。

总结

• Vue 的双向绑定通过数据劫持和发布-订阅模式，实现了数据模型和视图之间的自动同步。
• Vue2使用Object.defineProperty, vue3使用proxy。
• v-model 指令简化了双向绑定的实现。

vuex 工作原理

Vuex 是 Vue.js 应用程序的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。以下是 Vuex 的工作原理：

核心概念

1. State（状态）

   • State 是存储应用状态的地方，类似于组件的 data。
   • State 是响应式的，当 State 发生变化时，所有依赖于 State 的组件都会自动更新。

2. Mutations（变更）

   • Mutations 是唯一可以修改 State 的地方。
   • Mutations 必须是同步函数，用于执行实际的状态变更。
   • Mutations 接收 State 作为第一个参数，可以接收额外的参数（payload）。

3. Actions（动作）

   • Actions 用于处理异步操作，例如 API 请求。
   • Actions 可以提交 Mutations，从而修改 State。
   • Actions 接收一个 context 对象作为第一个参数，context 对象包含 commit、dispatch、state、getters 等属性。

4. Getters（获取器）

   • Getters 类似于组件的计算属性，用于从 State 中派生出新的数据。
   • Getters 可以接收 State 作为第一个参数，可以接收其他 Getters 作为第二个参数。

5. Modules（模块）

   • Modules 允许将 Store 分割成多个模块，每个模块都有自己的 State、Mutations、Actions 和 Getters。
   • Modules 可以嵌套，从而构建复杂的 Store 结构。

工作流程

1. 组件触发 Actions：

   • 组件通过 dispatch 方法触发 Actions。
   • Actions 可以执行异步操作，例如 API 请求。

2. Actions 提交 Mutations：

   • Actions 通过 commit 方法提交 Mutations。
   • Mutations 接收 State 和 payload 作为参数，执行实际的状态变更。

3. Mutations 修改 State：

   • Mutations 直接修改 State。
   • 由于 State 是响应式的，所有依赖于 State 的组件都会自动更新。

4. 组件从 State 或 Getters 获取数据：

   • 组件通过 state 或 getters 属性获取数据。
   • 当 State 发生变化时，组件会自动更新。

Vuex 的优点

• 集中式状态管理：

  • 所有组件共享同一个 State，方便管理和维护。

• 可预测的状态变更：

  • 只能通过 Mutations 修改 State，保证状态变更的可追溯性。

• 方便的调试工具：

  • Vue Devtools 提供了强大的调试功能，可以查看 State 的变化、Mutations 的提交、Actions 的调用等。

Vuex 的缺点

• 增加代码量：

  • 使用 Vuex 需要编写额外的代码，例如 State、Mutations、Actions、Getters 等。

• 学习成本：

  • Vuex 的概念和 API 相对复杂，需要一定的学习成本。

总结

Vuex 通过集中式状态管理，使得 Vue.js 应用程序的状态变更更加可预测和可维护。在大型项目中，使用 Vuex 可以有效地提高代码的可维护性和可测试性。