因为Vue，我重学了defineProperty方法！

站长

2023年02月17日 17:05 · 阅读数 50

相信写过Vue2的各位掘友，一定对defineProperty这个方法不会陌生，因为它是Vue2响应式的核心方法，由于前段时间学习了Vue2的响应式，# 🔥细说Vue响应式原理的10个细节！，由于一个掘友提出了一个defineProperty疑点❓，所以接下来聊一聊defineProperty这个方法究竟有什么小九九，下面我们先从栗子说起！

const obj = {
  name:'路灯哥',
}

Object.defineProperty(obj,'age',{
  value:24,
});// 为obj定义一个新属性age
obj.home='地球';// 直接添加obj属性

Object.defineProperty(obj,'name',{
  value:'路灯哥改名了！',
});// 改变obj属性内容
obj.name='路灯哥再次改名了！'; // 直接修改obj属性

console.log(obj); // {name: '路灯哥再次改名了！', home: '地球', age: 24}

从上面栗子中定义了一个obj对象，给对象添加属性或修改属性，其中分为两种方法实现：直接操作obj和通过defineProperty操作obj。那么问题来了，这两种方法有什么区别？直接操作obj不就更好了吗，为什么还要用defineProperty操作？如果obj不通过defineProperty操作，我们先考虑三个问题：

obj可方便控制是否枚举？ 答：直接if-else，符合某条件就行
obj是否可方便控制删除？ 答：直接if-else，符合某条件就行
obj是否可方便控制修改？ 答：直接if-else，符合某条件就行
obj属性值改变时，需要做一些其他事情，obj可以做到吗？ 答：缓存旧值，判断新值。

如果按正常情况下，上面的答案都符合常理，我们有没有想过？假如对象属性比较多的时候，是不是很麻烦？所以这时候就需要用到了defineProperty：

defineProperty()： defineProperty方法是Object属性的内置方法，它有三个参数：

注意地，传入的第一个参数一定是一个对象（数组也是对象）。

defineProperty<T>
(
o: T, // 目标对象 
p: PropertyKey, // 目标对象属性 string | number | symbol
attributes: PropertyDescriptor & ThisType<any>
): T;

attributes属性是一个PropertyDescriptor属性描述符，它内部包含了6个属性：

value：属性的值。

writable：属性是否可写。

const obj = {
  name:'路灯哥',
}

Object.defineProperty(obj,'name',{
  writable:false,
});

obj.name='路灯哥再次改名了';// Cannot assign to read only property 'name'

enumerable：属性是否可枚举。默认为true，注意地，这个属性针对的是数组的key枚举，比如对于for-in循环如下例子所示，对于for-of就需要提取key遍历Object.keys(obj)：

const obj = {
  name:'路灯哥',
}

Object.defineProperty(obj,'name',{
  enumerable:false,
});
// 没有遍历，如果设置为true就会有值了
for(let item in obj){
  console.log(item);// 没有值
}

configurable：属性是否可删除。

const obj = {
  name:'路灯哥',
}

Object.defineProperty(obj,'name',{
  configurable:false,
});
delete obj.name;// TypeError: Cannot delete property 'name'

get：访问器函数。默认undefined，get为属性的getter函数，如果没有getter，则为undefined；当访问该属性时，会触发此函数

set：设置器函数。默认undefined，set为属性的setter函数，如果没有setter，则为undefined。当属性值被修改就会触发，它有一个参数就是要修改为的值。

const obj = {
}

function defineReactive(data,key,val){
  Object.defineProperty(data,key,{
    enumerable:true,
    configurable:true,
    get:function(){
      console.log(`对象属性:${key}访问defineReactive的get！`)
      return val;
    },
    set:function(newVal){
      if(val===newVal){
        return;
      }
      val = newVal;
      console.log(`对象属性:${key}访问defineReactive的set！`)
    }
  })
}

defineReactive(obj,'name','路灯哥改名了！'); 
obj.name='路灯哥再次改名了！';// 触发了get函数：对象属性:name访问defineReactive的set！
console.log(obj.name);// '路灯哥改名了！'，触发了set函数：对象属性:name访问defineReactive的get！

从上面栗子中我们可以看出，当修改obj属性时，就会触发defineProperty内的set属性；当访问obj属性时，就会触发defineProperty内的get属性。而在Vue2中就是通过defineProperty来实现变量响应性的，从栗子上只是一个简单对象。如果对象中有嵌套对象、多个对象属性或数组的时候又怎么处理？

监听多个对象属性变化：先给每个对象都定义对象属性响应式。这样就可以实现对象属性读取或修改的时候

function observer(obj){
    if(typeof obj!=='object'||obj===null){
    return;
    }
    for(const key in obj){
    defineReactive(obj,key,obj[key]);// 给对象中每个属性都设置响应式
    }
}

监听嵌套对象属性变化：由于defineReactive方法参数分别目标对象、属性、属性值。所以当我们遍历的时候直接递归属性值的，比如对象a={b:{c:"2"}}，所以遍历c的时候，我们是不是这样传：defineReactive(a,'b',{c:'2'})，所以监听嵌套对象的时候遍历第三个参数实现。
```
function defineReactive(data,key,val){
  observer(val);
  ....
}

const obj = {
  name:'张三',
  friend:{
    name:'李四'
  }
}
observer(obj);
obj.friend.name='王五';
// 对象属性:friend访问defineReactive的get！
//  对象属性:name访问defineReactive的set！
```
我们可能会问为什么是这样输出呢？因为先读取obj里的friend属性再去修改friend内的name属性。

监听数组属性变化：我们也可以通过defineProperty方法实现监听数组的变化，我们先看看下面栗子：

const arr = [2,1,3];
for(let item in arr){
  // 遍历获取arr数组的key
  defineReactive(arr,item,arr[item]);
}

arr[0]=5;// 对象属性:0访问defineReactive的set！

但是Vue2中并没有这样用，为什么？我们有没有想过，假如这个数组长度比较大的时候，我们是不是得一一遍历定义响应式，这就会大大牺牲性能，所以由于这个原因，尤神并没有采取这种方法，而是通过重写原生的数组方法：

// 重写数组原生方法
const orginalProto = Array.prototype;
const arrayProto = Object.create(orginalProto); // 先克隆一份Array的原型出来
const methodsToPatch = ['push','pop','shift','unshift','splice','sort','reverse']
methodsToPatch.forEach(method => {
  arrayProto[method] = function () {
    // 调整方法指向使其指向arguments，而不是全局
    orginalProto[method].apply(this, arguments)
    console.log('监听赋值成功', method)
  }
})

Vue2中只是重写了这7个数组方法，通过改变全局数组方法的指向实现重写，为什么要在重写这里监听数组变化？因为数组的改变都会调重写方法，当数组执行修改数组元素时，都会执行重写方法这部分的逻辑，这样就可以实现数组元素的监听。而observer订阅对象时，考虑多个维度的数据形式，需要这样处理：

function observer(obj) {
  if (typeof obj !== 'object' || obj == null) {
    return
  }
  if (Array.isArray(obj)) {
    // 如果是数组, 重写原型
    obj.__proto__ = arrayProto // 让数组带上重写的数组方法。
    // 传入的数据可能是多维度的,也需要执行响应式
    for (let i = 0; i < obj.length; i++) {
      observer(obj[i])
    }
  } else {
    for (const key in obj) {
      // 给对象中的每一个方法都设置响应式
      defineReactive(obj, key, obj[key])
    }
  }
}

const obj = {
  name:'张三',
  hobby:['游戏','吉他']
}
observer(obj);
obj.hobby.push('学习'); 
// 对象属性:hobby访问defineReactive的get！
// 监听赋值成功 push

从栗子中我们可以看出读取obj.hobby会触发hobby属性的get方法，然后才会执行hobby数组操作。通过observer实现数组原生方法重写：

因为Vue，我重学了defineProperty方法！

转载自:https://juejin.cn/post/7198548106508664887