Vue响应式原理之Object.defineProperty()

已经用Vue好几年了，也知道Vue 2.x的底层响应式用的是Object.defineProperty()这个方法来实现的，可一直没有去深入了解过这个方法，今天就让我们一起去探个究竟。

一、对象属性的增删改查

在开始之前，我们先简单了解下如何对对象进行增、删、改、查等操作。

为了更加直观，我们直接上个简单例子。

首先创建一个空对象data。

let data = {};

然后我们可以对其进行增删改查操作。

1. 新增属性

data.text = '想学习更多前端知识，请关注公众号：前端微站';

2. 删除属性

delete data.text;

3. 修改属性

data.text = '想学习更多前端知识，请关注公众号：前端微站';  // 新增属性
data.text = '关注公众号前端微站，学习更多前端知识';  // 修改属性

4. 查询属性

查询有两种，一种是通过属性名（key）查询属性值（value）, 另一种则正好相反，是通过属性值（value）来查询属性名（key），不过这两种查询都可以通过for...in来遍历查询。

// 先给对象再新增一个属性
data.name = '前端王睿';

// 通过 key 查询 value
for(let key in data){
  if(key === 'name'){
    console.log(data[key]);  // 前端王睿
  }
}

// 通过 value 查询 key
for(let key in data){
  if(data[key] === '前端王睿'){
    console.log(key);  // name
  }
}

二、对象的属性描述符

上面所讲到的对象操作应该是司空见惯、众所周知的了，可是，你说好不容易找了个对象，说让你改就改，让你删就删，多没面子！有没有什么办法，我创建好了对象之后，就不让再随意改动呢，至少要我自己能够配置呀！

当然有！这时Object.defineProperty()就派上用场了！我们可以通过Object.defineProperty()对对象属性进行描述，也就是告诉我们哪个属性是不能改的，哪个属性是不能删的，等等。这里就要讲到对象的属性描述符，而属性描述符又分为 数据描述符 和 存取描述符。数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。

1. 数据描述符

我们同样按照增、删、改、查的顺序对其进行一一列举，可以看出通过Object.defineProperty()方式新增的对象属性，默认都是不可被删除、修改和枚举的。

① value
表示该对象属性的值，默认值为undefined。例如：

let data = {};
Object.defineProperty(data,'text',{
  value: '想学习更多前端知识，请关注公众号：前端微站'
});
console.log(data);  //  {text: '想学习更多前端知识，请关注公众号：前端微站'}

这看起来跟直接通过data.text = '想学习更多前端知识，请关注公众号：前端微站'新增对象属性的效果一样，具体区别请接着往下看。

② configurable
默认值为false，表示该对象属性不能被删除，只有为true时才可删除。例如：

let data = {};
Object.defineProperty(data,'text',{
  value: '想学习更多前端知识，请关注公众号：前端微站'
});
delete data.text;  // 删除失败
console.log(data.text);   // 想学习更多前端知识，请关注公众号：前端微站

删除没效果嘛！这时只需设置configurable值为true即可继续愉快地删除了。

let data = {};
Object.defineProperty(data,'text',{
  value: '想学习更多前端知识，请关注公众号：前端微站',
  configurable: true
});
delete data.text;  // 删除成功
console.log(data.text);   // undefined

③ writable
默认值为false，表示该对象属性不能被修改，只有为true时才可修改。例如：

let data = {};
Object.defineProperty(data,'text',{
  value: '想学习更多前端知识，请关注公众号：前端微站'
});
data.text = '关注公众号前端微站，学习更多前端知识';  // 修改失败
console.log(data.text);   // 想学习更多前端知识，请关注公众号：前端微站

修改失败了！这时给它设置writable值为true即可继续愉快地修改了。

let data = {};
Object.defineProperty(data,'text',{
  value: '想学习更多前端知识，请关注公众号：前端微站',
  writable: true
});
data.text = '关注公众号前端微站，学习更多前端知识';  // 修改成功
console.log(data.text);   // 关注公众号前端微站，学习更多前端知识

④ enumerable
默认值为false，表示该对象属性不能被枚举，只有为true时才可枚举。例如：

let data = {
  text: '想学习更多前端知识，请关注公众号：前端微站'
};
Object.defineProperty(data,'name',{
  value: '前端王睿'
});
console.log(data);  //  {text: "想学习更多前端知识，请关注公众号：前端微站", name: "前端王睿"}
for(let key in data){
  console.log(data[key]);  // 想学习更多前端知识，请关注公众号：前端微站
}

我们发现，data对象中虽然已经有两个属性，可我们发现最终却只能遍历出text这一个属性。这时只需给name属性设置enumerable值为true即可愉快地枚举出来了。

let data = {
  text: '想学习更多前端知识，请关注公众号：前端微站'
};
Object.defineProperty(data,'name',{
  value: '前端王睿',
  enumerable: true  //  想学习更多前端知识，请关注公众号：前端微站
});
console.log(data);  //  {text: "想学习更多前端知识，请关注公众号：前端微站", name: "前端王睿"}
for(let key in data){
  console.log(data[key]);
  // 想学习更多前端知识，请关注公众号：前端微站
  // 前端王睿
}

2. 存取描述符

以下这两个函数就是Vue中用于进行数据监听的Object.defineProperty()中属性描述符的两个核心方法。
① get
属性的 getter 函数，默认值为undefined。当访问该属性时，会调用此函数，返回值会被用作该属性的值。例如：

let data = {
  text: '想学习更多前端知识，请关注公众号：前端微站'
};
Object.defineProperty(data,'text',{
  get(){
    return '关注公众号前端微站，学习更多前端知识'
  }
});
console.log(data);  // {text: "关注公众号前端微站，学习更多前端知识"}

可以看到，此时data其实已经被我们修改了！

② set
属性的 setter 函数，默认值为undefined。当属性值被修改时，会调用此函数，该方法接受一个参数，也就是被赋予的新值。例如：

let data = {
  text: '想学习更多前端知识，请关注公众号：前端微站'
};
Object.defineProperty(data,'text',{
  set(value){
    console.log(value);  // 关注公众号前端微站，学习更多前端知识
  }
});
data.text = '关注公众号前端微站，学习更多前端知识';

*注意：value和writable不能与存取描述符（get和set）同时存在，不然会报错！这是因为两者之间可能会存在互斥关系，例如：value值与get返回值不同，writable为false而使用get却可改变对象属性的值，等等。

三、使用Object.defineProperty()写个简单的响应式渲染

<input id="input" type="text">
<p id="text"></p>

let oText = document.getElementById('text'),
    oInput = document.getElementById('input');
let data = {
  text: ''
};
Object.defineProperty(data,'text',{
  set(value){
    oText.innerHTML = value; // 当修改data.text值时，自动更改oText中的文字内容
  }
});
oInput.value = data.text = '前端微站';
oInput.addEventListener('keyup', function () {
  data.text = this.value;
});

重点总结：

① Object.defineProperty()中的 数据描述符 可以用来禁止对象属性的 删除、修改和枚举 操作
② Object.defineProperty()中的 存取描述符 可以用来对 对象赋值 和 获取属性值 进行拦截操作

结束语：

看我在这啰嗦了半天，可最终能不能掌握Object.defineProperty()的用法还是应该在实践中多总结，而不是简单地看完了就结束了。最后给大家安排个作业，利用Object.defineProperty()的存取描述符，实现一个超简易的Vue，具体功能就是实现上面这个简单的响应式渲染功能。