一、Vue的响应式原理：
1. 数据劫持（Data Hijacking）
- Vue 2 使用 Object.defineProperty() 来劫持对象的属性
- Vue 3 使用 Proxy 来代理整个对象
- 这使得 Vue 能够追踪数据的变化
2.发布订阅模式（Observer Pattern）
- 在组件渲染过程中，会访问响应式数据
- 每个响应式属性都有一个对应的 Dep（依赖收集器）
- Watcher（观察者）订阅这些变化
- 当数据变化时，Dep（依赖收集器） 通知所有相关的 Watcher 进行更新
3.响应式更新（Reactive Updates）
- 当数据发生变化时，触发 setter
- setter 通知 Dep
- Dep 通知所有相关的 Watcher
- Watcher 触发组件重新渲染或计算属性更新
4.异步更新队列
- Vue 将数据变化后的更新操作推入异步队列
- 使用
nextTick在下一个事件循环中统一执行更新 - 这样可以避免不必要的重复渲染
二、双向绑定原理
双向绑定是基于响应式原理之上的一个特定功能，用于表单输入和数据的双向同步
- 核心机制：
- 数据到视图的绑定（单向数据流）
- 视图到数据的更新（事件监听）
2.基本实现：
<!-- v-model 实际上是一个语法糖，等价于下面的代码 -->
<input v-model="message">
<!-- 等同于 -->
<input
:value="message"
@input="message = $event.target.value"
>
三、主要区别
1.范围不同：
- 响应式原理是 Vue 的核心特性，涉及所有数据变化的检测和更新
- 双向绑定是响应式系统的一个具体应用，主要用于表单元素
2.实现机制：
- 响应式是单向数据流的实现（数据 → 视图）
- 双向绑定则包含了数据到视图和视图到数据的双向更新
简单来说：
- 响应式原理是"数据变化 → 视图更新"的机制
- 双向绑定是"数据 ⟺ 视图"的互相影响机制
