Vue 采用 数据劫持结合发布者-订阅者模式 的方式来实现数据的响应式,通过Object.defineProperty 来劫持数据的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。
用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
Vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile 和 Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用 watcher 搭起 observer 和 Compile 之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。
Vue 无法检测到对象属性的添加 或 删除 (如data.tmpObj.ts = 1), 因为通过 Object.defineProperty
来将对象的key转换成 getter / setter 的形式来追踪变化,但 getter / setter 只能追踪一个数据是否被修改,无法追踪新增属性和删除属性。如果是删除属性,我们可以用 vm.$delete
实现,可用以下方法:
- 可以使用
Vue.set(tmpObj , ts, 1)
方法向嵌套对象添加响应式属性; - 也可以给这个对象重新赋值,比如 data.tmpObj = {...data.tmpObj , ts:1}