vue2.x中数据的双向绑定主要通过Object.defineproperty()方法实现，data中的数据改变通过Object.defineProperty()对属性设置set属性，获取通过get属性，Object.defineProperty的作用就是劫持一个对象的属性,通常我们对属性的getter和setter方法进行劫持,在对象的属性发生变化时进行特定的操作。而vue3.x主要是通过proxy实现， proxy在目标对象的外层搭建一层拦截，外界对目标对象的某些操作，必须通过这层拦截。
我们知道对象是由多个键/值对组成的无序集合。对象当中的属性可以是任意类型的值。我们可以通过构造函数以及字面量的形式来定义对象。
Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象，也就是说，该方法允许精确地添加或修改对象的属性。
摘要： JavaScript有个很神奇的Object.defineProperty()，了解一下？
目前前端开发中比较流行的两个框架： Angular 和 Vue 都采用了数据双向绑定的技术。 Angular1 中数据双向绑定是通过「脏检测」的方式实现，每当数据发生变更，对所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了变化以及这个变化是否会影响其它数据的变化，然后将变更的数据发送到视图，更新页面展示。
通过原生JS的defineProperty方法, 通过get和set方法来监听数据的变化。
可以看到，我分别打印了原始对象，修改属性后的对象，添加属性后的对象。如果第二个参数 prop 存在，则是修改属性操作，如果 prop 不存在，则是添加属性操作。
ES6 刚推出的时候，let 和 const 应该是大多数人学习 ES6 的第一个知识点。
要修改属性的默认特性，就必须使用 Object.defineProperty()方法 ；在了解Object.defineProperty()之前，需要先明白对象属性的一些特性，明白了这些特性之后，对Object.defineProperty()的学习就会顺利很多了。
从 JavaScript 的数据双向绑定(defineProperty、Proxy)开始，谈谈 Vue2 中的数组监听问题。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。
如果我们直接为对象添加一个属性，比如 obj.a = 10 我们说 a 是 普通属性，他的值既可以被改变，也可以被删除，还可以被for..in 或 Object,keys 枚举遍历。
用过vue的人都知道，vue有一个特别好用的数据绑定，只要绑定了，你只要改变了这个数据，页面也会跟着渲染。其实原生的JS也是可以做到的，vue其实就是用了原生的原理。
大家好，我是前端西瓜哥，今天来看看 Object.defineProperty 和 Proxy 的区别。
**通过结果我们发现， enumerable属性值为true 时可以被枚举， 不为true时是不可以被枚举的 **
创建自定义对象最简单的方式就是以字面量的形式创建对象（或创建一个Object实例），然后再为它添加属性和方法，如下所示：
众所周知，默认情况下我们可以任意对自己定义的对象进行增删改的。但是，在某些情况下，我们不能让别人去随便修改我们定义的对象的属性，那么我们应该怎么处理呢 ？这就需要了解下对象的属性特征了。
Object.defineProperty ，顾名思义，为对象定义属性。在js中我们可以通过下面这几种方法定义属性
给这个对象添加一个fullName属性，fullName的值为obj.firstName-obj.lastName
属性描述符是ES5中的一个重要的概念。它可以对对象做一些特定的高级操作，今天我们就学习一下ES5中的属性描述符。 ES5中的属性描述符是由Object类的一个静态方法defineProperty来设置的，该方法接收三个参数，分别是：属性操作的对象、属性名和一个属性描述符的对象。我们来看一个简单的例子：
看《深入理解JavaScript》的this篇时看到“访问器属性”这个不熟悉的名词，百度后找到两篇感觉比较合适的文章，整合记录一下，以参考资料2为主，参考资料1为辅助补充。
早在大半年前，掘金某位用户分享的面试题整理中有一题，简述let与const区别，你能自己模拟实现它们吗？，题目意思大概如此，时间久远我也很难找到那篇文章，当时看到此题对于const实现我的想法就是有个writable属性可以定义值是否可以修改，不过也只是脑中一闪，并未细究。
某比赛实在有点坑人，题目涉嫌抄袭不说，还不停改来改去。算了不吐槽了，说一则javascript小特性吧。
老规矩先把代码给大家，新建一个html文档(新建一个txt文本文档，把后缀名改为“ .html ” 以记事本打开，把复制好的代码粘贴进去，“ 保存 ”，退出，双击或右键选择浏览器打开。如果 如果同学们觉得难，点开“ 它 ”，我一步步教。
vue3.0中，响应式数据部分弃用了Object.defineProperty，使用Proxy来代替它。本文将主要通过以下方面来分析为什么vue选择弃用Object.defineProperty。
老有人跑来跟我说 Proxy 和 defineProperty 相比，是性能的巨大提升。我一听，这不对劲啊，跟我学的知识不太一样，我明明记得Proxy 性能比 defineProperty 更差。
看实例，允许直接通过该方法定义属性并直接指定对应的特殊值，若没指定的特殊值则按false ，要想让默认值为 true，需要用字面量或 new Object() 来创建
数据响应式原理是我们在开发过程中一定要了解的知识，彻底搞懂数据响应式原理，刻不容缓。
这个题目本身不是特别难，只能说是作为社招的基础面试题，但是如果想回答好这道题也不是很容易。
Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新。
定义： 数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。
我们或多或少都听过“数据绑定”这个词，“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？
TypeScript的类装饰器是一种强大的功能，它允许开发者在类声明前应用装饰器函数，以自定义类的行为和属性。这些装饰器可以用于各种用途，如添加元数据、修改类的原型或行为，或者执行某些操作。通过类装饰器，开发者可以更灵活地扩展和定制类，提高了代码的可维护性和可读性。这个功能在TypeScript中广泛用于框架和库的开发，以及在实际应用中，帮助开发者实现更高级的功能和模式。
前几天在知乎看到了一个问题，React 的 Hooks 是否可以改为用类似 vue3 composition api 的方式实现？
Object.defineProperty这个并不是es6的语法，这个是给一个对象，添加属性，但是目前框架很多实用这个方法，来实现数据劫持，也就是数据双向绑定
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
vue3 响应式数据放弃了 Object.defineProperty，而使用==Proxy==来代替它
使用Object.defineProperty为对象添加属性 let person = {name:'name',sex:'male'}; Object.defineProperty(person,'age',{value:18}); 默认不会被枚举，使用Object.keys(person)将获得[‘name’,‘sex’]。以下写法使之可枚举 Object.defineProperty(person,'age',{value:18,enumerable:true}); 默认不可修改，使用person.a
接下来我们浅析数据双向绑定的原理 一、vue2 1、认识defineProperty
Object.defineProperty 和 Proxy 是用于实现响应式数据的两种不同方式。
用 Object.defineProperty给watcher对象的每一个属性分别定义了get和set。getter负责记录依赖，setter负责数据拦截、对data属性的赋值和修改dom更新。大白话就是通过数据劫持 defineProperty + 发布订阅者模式。
首先，解答一下标题：Object.defineProperty 不能监听原生数组的变化。如需监听数组，要将数组转成对象。
Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用，它的作用是为对象的某个属性对外提供 get、set 方法，从而实现外部对该属性的读和写操作时能够被内部监听，实现后续的同步视图更新功能
Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。
通过defineProperty方法，我们可以给对象添加一个新属性，或者修改已经存在的属性。而我们使用defineProperty方法给对象添加了一个属性之后，属性默认为 不可枚举(not enumerable). Object.keys方法仅返回对象中 可枚举(enumerable) 的属性，因此只剩下了"name".
摘自vue文档官网 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。）
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
