知识篇：（十）Vue2 的秘密武器：Object.defineProperty，原来响应式是这样实现的！

Vue2 的秘密武器：`Object.defineProperty`，原来响应式是这样实现的！

如果你是 Vue2 的粉丝，或者刚开始学习 Vue2，肯定会对它那神奇的“响应式”系统赞叹不已——只要你改动了数据，视图就自动更新！这个功能看起来就像魔法一样，但其实幕后有一个强力工具在默默工作，那就是——Object.defineProperty。今天我们就来揭开这位“魔法师”的面纱，看看 Vue2 的响应式到底是怎么回事。

在这里插入图片描述

1. `Object.defineProperty`：Vue2 响应式系统的“秘密武器”

如果 Vue 是一个超级英雄，那么 Object.defineProperty 绝对是它的“超能力源泉”。它允许 Vue “偷听”你的数据，知道你什么时候读取它、什么时候改动它，然后 Vue 就能智能地更新界面。

简单来说，Object.defineProperty 让 Vue 能够在幕后为你的数据属性加上“监听器”。每当你试图访问或修改这些数据时，它会悄悄地跳出来说：“嘿，我看到你在改东西，我得赶紧通知界面更新！”

2.1 它到底长什么样？

Object.defineProperty 是 JavaScript 的内置方法。虽然名字听起来很学术，但它的使用其实很简单——让我们来见识一下它的真容：

Object.defineProperty(obj, prop, descriptor)

obj：要给谁加“监听器”？这是你监听的对象。
prop：监听哪个属性？它是你关注的那个属性的名字。
descriptor：这个描述符就是“监听器”的配置，告诉它该怎么监听。

例如，你想给对象 person 的 name 属性加个监听器：

let person = {
   };
Object.defineProperty(person, 'name', {
   
  value: 'Alice',
  writable: true, // 能不能改？
  enumerable: true, // 能不能被枚举（出现在循环里）？
  configurable: true, //