Vue响应式的原理

一. Vue响应式原理的核心概念

1. Vue响应式原理基于以下核心概念：

① 响应式对象：Vue使用Object.defineProperty()来  reactive（反应）对象中的属性，使其变化可以被检测。

注意：

        ★ Object.defineProperty() 是JavaScript中的一个方法，‌用于在一个对象上定义新属性或修改现有属性。‌这个方法接收三个参数：‌目标对象、‌属性名称和一个描述符对象。‌描述符对象可以包含以下属性：‌

     ☆ value：‌属性的值。‌可以是任何类型的值。‌

     ☆ writable：‌一个布尔值，‌表示属性值是否可以被改变。‌默认为false。‌

     ☆ enumerable：‌一个布尔值，‌表示属性是否可以在for...in循环或Object.keys()中被枚举。‌默认为false。‌

     ☆ configurable：‌一个布尔值，‌表示属性是否可以被删除或改变其属性描述符。‌默认为false。‌

        ★ reactive是vue.js中用于创建响应式数据的一个函数，其作用是将普通JavaScript对象转换成响应式对象，使其能自动更新视图。通过依赖关系追踪系统，当响应式数据的值发生变化时，所有依赖数据的视图组件都会自动更新，从而简化开发并优化性能。

---

② 依赖追踪：对每个响应式属性，维护一个依赖（Dependency）的列表，这些依赖是Watcher对象。

注意：

        ★ Watcher对象：是一个观察者对象，‌用于监听数据的变化并执行相应的回调函数。

---

③ 虚拟DOM：使用虚拟节点（VNode）进行高效的DOM更新。

注意：