vue

Vue 中的响应式原理是什么？它是如何实现数据绑定的？

Vue 2 使用 Object.defineProperty 来实现数据的响应式

1. 数据劫持：

   • Vue 通过 Object.defineProperty 递归地将数据对象的属性转换为 getter 和 setter。
   • 当访问数据时，getter 会被触发，Vue 会记录依赖（即哪些组件或视图依赖于这个数据）。
   • 当数据发生变化时，setter 会被触发，Vue 会通知所有依赖进行更新。

2. 依赖收集：

   • 在组件渲染过程中，Vue 会创建一个 Watcher 实例，用于监听数据的变化。
   • 当数据被访问时，Watcher 会被添加到依赖列表中。

3. 派发更新：

   • 当数据发生变化时，Vue 会通知所有相关的 Watcher，触发视图的重新渲染。

Vue 3 使用 Proxy 来实现响应式，相比 Vue 2 的 Object.defineProperty，Proxy 提供了更强大的功能。

1. 数据劫持：

   • Vue 3 使用 Proxy 来代理整个对象，而不是像 Vue 2 那样递归地劫持每个属性。
   • Proxy 可以拦截对象的各种操作，如读取、赋值、删除等。

2. 依赖收集：

   • 当通过 Proxy 访问数据时，Vue 会记录依赖。
   • Vue 3 使用 effect 函数来跟踪依赖，类似于 Vue 2 的 Watcher。

3. 派发更新：

   • 当数据发生变化时，Proxy 会拦截操作，并通知所有相关的依赖进行更新。

数据绑定

• vue 的数据绑定是通过模板语法和响应式系统实现的：

  1. 模板编译：
  • Vue 将模板编译成渲染函数，渲染函数会生成虚拟 DOM。
  • 在渲染函数中，Vue 会访问响应式数据，触发依赖收集。
  2. 响应式更新：
  • 当响应式数据发生变化时，Vue 会重新执行渲染函数，生成新的虚拟 DOM。
  • Vue 通过对比新旧虚拟 DOM，计算出最小的更新操作，并应用到真实 DOM 上。