Object.defineProperty的理解

88 阅读2分钟

说到Object.defineProperty这个属性,学过vue2并了解其响应式数据的核心实现的家人们肯定耳熟了,现在我来介绍一下这个属性 1、根据MDN文档Object.defineProperty的静态方法是直接在一个对象上定义一个新属性,或修改其现有属性,并返回此对象,具体代码展示如下: 基础语法: Object.defineProperty(操作的对象,对象中的属性, { value:给对对象属性赋的值, writable:改属性是否可以被更改(true/可以更改;false/不可以更改), enumerable:控制属性是否可以被遍历, configurable: 控制以上属性本身不能被修改 }) 在代码中的举例 2、进阶用法,Object.defineProperty中有set和get两个方法,vue2响应式数据底层实现主要就是依赖于这两个方法的 语法介绍: Object.defineProperty(操作的对象,对象中的属性, { get: function () { return 值; }, // 读取器 getter set: function (val) { val为新的值 }, // 设置器 setter }) 具体代码举例: 基本介绍 实现赋值修改 以上就是我对Object.defineProperty用法的一些理解,下面举一个使用场景 当有一个需求,用到的数据对象值不能被修改且当修改被修改时提示错误,我们可以这样操作: 总结:Object.defineProperty可以很好的提高数据的安全性,可以很好的对数据进行分类管理,在大型项目中提高代码的安全性,get和set函数可以时刻监视数据的访问和修改,这也是vue2中实现响应式数据的核心。 给自己定个小目标,下一章自己仿写一个vue2的响应式数据 以上仅是个人的一些小总结,欢迎伙伴们讨论,共同进步-----fighting