Vue MVVM与数据代理


MVVM

M: model 模型 对应data数据
V: 视图 模板 其实就是html页面
VM: 视图模型 对应vue实例对象

vm通过dom listener和data-binding 为页面和数据建立连接

V <---> VM <---> M

数据代理

通过一个对象代理另一个对象中属性的操作, 其实就是使用defineProperty,将一个对象的get set操作另一个对象



    

Vue中的数据代理

vm.prop
vm._data === data

_data把data进行了升级,从而能进行响应式操作

把data中的属性,放vm中一份

原理:

vm中的数据代理

通过vm对象来代理data对象中属性的操作(读/写)

vm数据代理的好处

更加方便的操作data中的数据

基本原理

将Object.defineProperty把data对象中所有属性添加到vm上
为每一个添加到vm上的属性,指定一个getter/setter
在getter、setter的内部去操作data对应的属性

vue