渲染优先级

• 优先使用render函数，没有才会使用template选项
• 编译的过程是将template编译成render函数

全局api 在core/global-api/index文件中

set,delete,nextTick

Vue构造函数

core/instance/index

• initMixin.js实现_init()，包括
  initLife 初始化root,refs
  initEvents 处理父组件传递的监听器
  initRender scopedSlits,$createElement()
  beforeCreate
  initInjections 获取注入数据
  initState 初始化组件中的props/methods/data/computed/watch
  initProvide 提供数据
  created
• stateMixin props,delete,$watch
• eventsMixn emit,off
• lifecycleMixn _update,dedtroy
• renderMixin $nextTick,_render

数据响应式

// state.js
initData() > observe() > new Observer()
data中的每个对象都有一个Observer对象,有嵌套则递归创建Oberver
Observer 类中有dep：new Dep()
// defineReactive.js
数据劫持Object.defineProperty()
dep.depend()
和watcher实例建立关系
一个组件有一个watcher对象

dep.notify() // 通知更新

Vue响应式原理简述

• Vue遍历data中的所有属性，使用Object.defineProperty方法通过存取器函数setter和getter追踪属性的变更。

• 每个组件实例都对应一个 watcher 实例，在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知Watcher重新计算，从而使它关联的组件得以更新

  
  image.png

• 通过一个观察对象，为每个属性，设置存取器函数并注册一个依赖管理实例dep，dep内为每个组件实例维护一个watcher实例，在属性变更时，通过setter通知dep实例,dep实例分发该变更给每一个watcher实例，watcher实例各自计算更新组件实例，即watcher追踪dep添加的依赖，Object.defineProperty()方法提供这种追踪的技术支持，dep实例维护这种追踪关系。

  
  image.png