vue响应式原理和数据双向绑定

69 阅读1分钟

vue2.0使用Object.defineProperty的get和set方法

通过Object.defineProperty为对象obj添加属性,可以设置对象属性的gettersetter函数。之后我们每次通过点语法获取属性都会执行这里的getter函数,在这个函数中我们会把调用此属性的依赖收集到一个集合中 ;而在我们给属性赋值(修改属性)时,会触发这里定义的setter函数,在次函数中会去通知集合中的依赖更新,做到数据变更驱动视图变更。

vue3.0使用Proxy实现(处理数组和响应上更加方便)

数据双向绑定使用指令v-modal实现,也可以说是一个input事件和value的语法糖。 Vue通过v-model指令为组件添加上input事件处理和value属性的赋值。