这个系列我们主要说的是Vue的数据绑定原理，其他的过程我们不在本系列中讲解
那么话不多说，我们来直奔主题
先来贴一张官网的响应式原理图，相信大家应该已经看n次了，你应该也知道Object.defineProperty()这个API，为了照顾没有基础的同学，我们来简单的复习一下Object.defineProperty()，你也可以去MDN了解更详细的语法（如果对这一块非常自信可以直接跳到下一节）
Object.defineProperty()接收三个参数，分别是要劫持的对象，要劫持的属性名称，要定义或修改的属性描述
Object.defineProperty(obj, key, descriptor) 复制代码
前两个很好理解，那么属性描述是什么呢？属性描述是一个描述属性状态的对象，可以设置属性的可枚举、可配置等，如下
{ // 以下都是默认值 configurable: false, // 设置属性的可配置性，设置为true时描述符可以改变 enumerable: false, // 可枚举性，可以被for...in等遍历 value: undefined, // 属性值 writable: false, // 设置为true时属性值可以被重写 get: undefined, // 可以设置读取属性值时触发函数 set: undefined, // 可以设置重写属性值时触发函数 } 复制代码
举个🌰
const bar = {} var val = undefined Object.defineProperty(bar, 'name', { get() { console.log('读取name的值') return val }, set(newVal) { val = newVal console.log('设置name的值') } })
可以看到当bar的name属性在读取和重写时都出发现了相应的方法
但是这样对每一个属性去进行劫持有多麻烦，所以一般在使用时要对它进行一层封装，做到可以通用
function defineReactive(obj, key, val) { Object.defineProperty(obj,key,{ get() { console.log('读取name的值') return val }, set(newVal) { val = newVal console.log('设置name的值') } } } const bar = {} defineReactive(bar, 'name', 'king') 复制代码
现在我们已经作好了准备，开始探秘响应式原理吧
