Vue框架一个比较核心的功能就是我们的数据是响应式的，这样我们在修改数据的时候，页面会自动帮我们更新，那么想要实现这个功能就要实现对一个数据的劫持，即在取值和设置值的同时我们能够检测到即数据劫持。vue2响应式的实现原理所依赖的就是Object.defineProperty()这个API，而vue3用的则是proxy今天我就来分享一下这两个api。

一、什么是Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

二、基本用法

Object.defineProperty(obj, prop, descriptor)
obj表示想要代理的对象
prop表示想要代理对象中的key
descriptor表示代理该对象的一些方法配置
我们在访问一个对象的某个值或者修改一个对象的某个值的时候会触发里边的getter和setter方法

let obj1 = {x: 100}let obj2 = {y: 200}Object.defineProperty(obj2, 'x', {get() {console.log('我读取了');return obj1.x},set(value) {console.log('我设置了');obj1.x = value}})console.log(obj2.x);obj2.x=111

执行结果:

三、配置对象的一些常见用法

configurable:false不能删除属性:

 let Person = {name:'张三'};Object.defineProperty(Person, "name", {configurable: false,});console.log(delete Person.name);

当 writable 属性设置为 false 时，该属性被称为“不可写的”。它不能被重新赋值

Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #