[vue] 说说你对Object.defineProperty的理解
Activity
maozhuo123 commentedon Jul 3, 2019
Object.defineProperty定义新属性或修改原有的属性;
vue的数据双向绑定的原理就是用的Object.defineProperty这个方法,里面定义了setter和getter方法,通过观察者模式(发布订阅模式)来监听数据的变化,从而做相应的逻辑处理。
dealdot commentedon Apr 21, 2021
为何大家都说数据双向绑定原理,这里应该是说响应式吧,双向绑定不是v-model这样的才算吗?
Gcalolin commentedon Aug 25, 2021
Object.defineProperty 基础用法:
vue2 通过遍历组件的data函数返回的对象的所有属性,对每个属性都进行Object.defineProperty的 getter setter, 在getter时收集依赖,setter时触发watcher 更新依赖
hyj443 commentedon Oct 20, 2021
Object.defineProperty 定义一个对象的属性,三个参数都必填,第三个参数是属性描述符对象
经过Object.defineProperty()定义的属性,再次调用Object.defineProperty()定义相同的属性,会报错 Uncaught TypeError: Cannot redefine property
而且你通过.key修改属性值,也无法修改。因为Object.defineProperty()定义的属性是不可修改的。
但是,一开始就存在的属性,可以通过.key或Object.defineProperty()重复修改
ES5有两种属性,数据属性和访问器属性
数据属性有4个属性描述符来描述它:
访问器属性
访问器属性不包含数据值,包含getter和setter函数(不是必须,默认为undefined)
当一个属性设置了 get 和 set,它就是一个访问器属性
getter在读取访问器属性时被触发,setter在修改访问器属性时被触发
访问器属性只能通过Object.defineProperty()来定义