=============================================================================
Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的,首先是对数据进行监听,然后当监听的属性发生变化时则告诉订阅者是否要更新,若更新就会执行对应的更新函数从而更新视图
通过Object.defineProperty()
来劫持各个属性的setter
, getter
,在数据发生变动时通
知Vue实例,触发相应的getter
和setter
回调函数。
当把一个普通 Javascript 对象传给Vue 实例来作为它的 data 选项时, Vue 将遍历它的属性,用 Object.defineProperty
将
它们转为 getter/setter
。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
关于VUE双向数据绑定,其核心是 Object.defineProperty() 方法
⌚介绍 Object.defineProperty() 方法
Object.defineProperty(obj, prop, descriptor)
这个方法内有三个参数,分别为 obj(要定义其上属性的对象)、prop(要定义或修改的属性)、descriptor(具体的改变方法)
简单来说,就是用这个方法定义一个值,当调用时我们使用了它里面的get方法,当我们给这个属性赋值时,同时又调用了里面的set方法