参照网上的vue源码分析，简单的做个笔记

version: 2.3.x

目录结构

1
2
3
4
5
6
7
vue-src
├── compiler			# 编译，将DOM树编译为js函数
├── core			# 核心模块，定义Vue构造函数及原型方法，Vue全局接口，virtual Dom
├── platforms			# web和weex平台
├── server			
├── sfc				# 对(.vue)文件parse
└── shared

vue实例

1.Vue构造方法中调用Vue.prototype_init()，在_init()方法中主要做两件是，

  • 通过$mount方法，compileToFunctions() -> compile()，编译Dom。
  • 调用mountComponent(vm, updateComponent, noop)方法，初始化Watcher方法，加入Dep队列。通过Object.defineProperty重写getter，setter方法，在getter中收集Dep依赖，在setter通知watcher。

2.数据发生改变时，setter中的dep.notify()响应，触发watcher.update()，异步的对视图更新，执行回调函数_update(vm._render(), hydrating)，在_update中patch方法对新旧节点diff更新。