Vue源码分析-MVVM实现原理

什么是MVVM

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。

• 模型指的是后端传递的数据。
• 视图指的是所看到的页面。
• 视图模型是mvvm模式的核心，它是连接view和model的桥梁。它能够将数据转化为视图，也能将视图转化为模型，其中视图与模型是不能直接进行通信。
• ViewModel通过DOM事件监听视图数据的变化，一旦数据发生改变则更新model数据； Model通过数据绑定机制，将数据渲染到视图的Dom上，从而实现了数据的双向绑定。

参考：
http://baijiahao.baidu.com/s?id=1596277899370862119&wfr=spider&for=pc
https://segmentfault.com/a/1190000018399478
https://www.cnblogs.com/gaosong-shuhong/p/9253973.html

Vue中的MVVM实现原理

一、数据劫持-
1、Object.defineProperty(obj, key, atts)
在创建Vue实例的时候，通过data属性来管理数据：

new Vue({
   
  el: "#app",
  data:{
   
  }
});

然后使用Object.defineProperty(obj, key, atts)方法来对data进行get和set操作。例如：

Object.keys(data).forEach(key => {