说到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