ES6-defineProperty和proxy（数据拦截即响应式的实现）

站长

2023年08月31日 01:54 · 阅读数 33

前言

大家都知道在 Vue 中很重要的一部分就是响应式变量，就是能感知到变量的变化并做出响应。要实现这样的效果，那么就要对变量进行代理，也就是监听，当数据要变化时需要通过这个代理来实现，这样代理就能感知到变量数据的改变，也就实现了响应式。在ES5中，官方为对象提供了一个api就是defineproperty，也叫数据劫持，早期Vue2也是通过这个来实现数据响应式的，但存在一些不足，之后ES6就推出 proxy 增加了许多功能来完善不足，也叫数据代理，所以之后尤雨溪就在Vue3修改了响应式的部分源码，就是使用的proxy。下面我也总结了这两个api的具体使用，和区别，帮助大家理解。

defineproperty

defineproperty是使用于对象的一个方法，在ES5中被提供出来，也叫数据劫持方法，可以在一个对象定义一个新的属性，或修改对象现有的属性，使用语法是Object.defineProperty(obj,prop,desc),其中可以接收三个参数，第一个参数是被劫持的属性（obj），第二个参数指要定义或者修改的属性（prop），第三个参数是描述被定义或者修改的属性（desc）。其中第三个参数主要包含四个操作属性和两个存取器属性：

Object.defineProperty(obj,prop,{
  value: xxxx, //设置新属性的值或者修改原有属性的值
  writable: true/false, //是否可写，即是否可以修改该属性的值
  enumerable: true/false, //是否可枚举(遍历)，即该属性是否可以被遍历到
  configurable:true/false, //是否可配置，即该属性是否可以被删除等
  get(){ //获取该属性的值时触发
    
  },
  set(){ //设置属性的值时触发
    
  }
})

四个操作属性：

value

可以设置新属性的值或者修改原有属性的值

let obj = {
  num:1
}
Object.defineProperty(obj,'count',{
value:2,
writable:true, 
enumerable:true, 
configurable:true,
})
console.log(obj) //{ num: 1, count: 2 }

writable

若设置writable的值为false，那么该属性被劫持后，其值无法被修改

let obj = {
    num:1
}
Object.defineProperty(obj,'num',{
    value:2,
    writable:false, 
    enumerable:true, 
    configurable:true,
})
obj.num = 3
console.log(obj) //{ num: 2 }

enumerable

若设置enumerable的值为false，那么该属性被劫持后无法被遍历到，但是可以直接访问该属性

let obj = {
  num:1
}
Object.defineProperty(obj,'count',{
  value:2,
  writable:true, 
  enumerable:false, 
  configurable:true,
})
console.log(obj.count); //2
for(let key in obj) {
  console.log(key); //num
}

configurable

若设置configurable的值为false，那么该属性被劫持后不能被做删除操作等

let obj = {
  num:1
}
Object.defineProperty(obj,'count',{
  value:2,
  writable:true, 
  enumerable:true, 
  configurable:false,
})
delete obj.count
console.log(obj); //{ num: 1, count: 2 }

存取器属性

get()和set()

当使用get()和set()来获取和设置该被劫持属性的值，那么不能使用操作属性的value和writable属性，会冲突。当要访问被劫持属性的值，那么会触发get()，并得到的是get()中返回的值;当要修改被劫持属性的值就会触发set(),其天生具有一个参数newVal，表示新的值

var obj = {},value = null //value用于承接num的值，如果直接在get()使用obj.num，那么会陷入死循环

Object.defineProperty(obj,'num',{
  get(){
    console.log('执行了 get 操作');
    return value
  },
  set(newVal){
    console.log('执行了 set 操作');
    value = newVal
  }
})
obj.num = 1
console.log(obj.num);