基本原理
- 数据代理 通过操作vm.name就能操作定义的data中的数据; 通过Object.defineProperty方法监听数据的读写，实现数据代理
- 模板解析 实现一个compile对html中特殊标识进行解析(大括号表达式,v-html, v-text等); 生成相应文档碎片并跟新
流程分析
- 首先进行数据代理。将选项data.name代理到vm.name中。此处不难，主要使用Object.defineProperty方法既可实现
- 第二步对data的每一层进行observe，创建dep，为后面创建watcher时绑定dep做准备。这一步的主要作用是为data中的每一层创建oberver和watcher。每个数据的每一层对应一个dep
- 最后一步，创建compiler这是整个过程的核心功能 创建fragment，然后初始化数据，最后将frament放到元素中去 初始化数据的过程主要分以下几步 对带有大括号表达式的文本节点，和带有v-text，v-html等指令的元素节点进行第一次数据渲染和数据绑定（通过数据劫持方法实现数据绑定） 数据劫持：Vue的核心，当vm.name = 1这样的表达式出现时，页面内容就会随之更新，这是响应式框架最大的特点。 在进行数据第一次渲染时，我们会为每一个v-指令已经{{}}表达式所代表的node创建watcher，比如{{name}}出现的两次，我们就会创建两个watcher。创建watcher时会触发对应name的dep，然后在dep中添加watcher，在watcher中添加dep。这样就完成了数据绑定，当我们改变vm.name时就会触发dep.notify方法更新dep所对应的每一个watcher的回调函数以达到更新界面效果
仿mvvm项目地址： gitee.com/AnthonyZ/mv…
