【Vue2源码学习分析】

# 文件结构

源码目录

# 调试环境搭建

• 安装依赖: npm i
• 安装rollup: npm i -g rollup
• 修改dev脚本，添加sourcemap，package.json

 "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web- full-dev",
    
    
    

     
     
      
     
     
      
    
    
    

• 运行开发命令: npm run dev
• 引入前面创建的vue.js，samples/commits/index.html

<script src="../../dist/vue.js"></script>
    
    
    

     
     
      
     
     
      
    
    
    

术语解释:

• runtime:仅包含运行时，不包含编译器
• common:cjs规范，用于webpack1
• esm:ES模块，用于webpack2+
• umd: universal module definition，兼容cjs和amd，用于浏览器

# 入口

dev脚本中 -c scripts/config.js 指明配置文件所在

参数 TARGET:web-full-dev 指明输出文件配置项

// Runtime+compiler development build (Browser){
       'web-full-dev': {
       entry: resolve('web/entry-runtime-with-compiler.js'), // 入口 dest: resolve('dist/vue.js'),// 目标文件 format: 'umd', // 输出规范 env: 'development', alias: {
       he: './entity-decoder' }, banner, },}
    
    
    

     
     
      
     
     
      
    
    
    

# 初始化流程

1. 入口 platforms/web/entry-runtime-with-compiler.js

扩展默认$mount方法:处理template或el选项

2. platforms/web/runtime/index.js

• 安装web平台特有指令和组件
• 定义__patch__:补丁函数，执行patching算法进行更新
• 定义$mount:挂载vue实例到指定宿主元素(获得dom并替换宿主元素)

4. core/index.js

初始化全局api 具体如下:

 Vue.set = setVue.delete = delVue.nextTick = nextTickinitUse(Vue) // 实现Vue.use函数initMixin(Vue) // 实现Vue.mixin函数initExtend(Vue) // 实现Vue.extend函数initAssetRegisters(Vue) // 注册实现Vue.component/directive/filter
    
    
    

     
     
      
     
     
      
    
    
    

5. core/instance/index.js

Vue构造函数定义

定义Vue实例API

 function Vue (options) {
       // 构造函数仅执行了_init this._init(options)}initMixin(Vue) // 实现init函数stateMixin(Vue) // 状态相关api $data,$props,$set,$delete,$watch eventsMixin(Vue)// 事件相关api $on,$once,$off,$emit lifecycleMixin(Vue) // 生命周期api _update,$forceUpdate,$destroy renderMixin(Vue)// 渲染api _render,$nextTick
    
    
    

     
     
      
     
     
      
    
    
    

6. core/instance/init.js

创建组件实例，初始化其数据、属性、事件等

initLifecycle(vm) // $parent,$root,$children,$refs initEvents(vm) // 处理父组件传递的事件和回调initRender(vm) // $slots,$scopedSlots,_c,$createElement callHook(vm, 'beforeCreate') initInjections(vm) // 获取注入数据initState(vm) // 初始化props，methods，data，computed，watch initProvide(vm) // 提供数据注入callHook(vm, 'created')
    
    
    

     
     
      
     
     
      
    
    
    

7. $mount

mountComponent

执行挂载，获取vdom并转换为dom

new Watcher()

创建组件渲染watcher

updateComponent()

执行初始化或更新

update()

初始化或更新，将传入vdom转换为dom，初始化时执行的是dom创建操作

render() src\core\instance\render.js

渲染组件，获取vdom

整体流程

new Vue() => _init() => $mount() => mountComponent() => updateComponent()/new Watcher() => render() => _update()

# 数据响应式

Vue一大特点是数据响应式，数据的变化会作用于UI而不用进行DOM操作。原理上来讲，是利用了JS语 言特性Object.defineProperty()，通过定义对象属性setter方法拦截对象属性变更，从而将数值的变化 转换为UI的变化

具体实现是在Vue初始化时，会调用initState，它会初始化data，props等，这里着重关注data初始 化，

整体流程

1. initState (vm: Component) src\core\instance\state.js

初始化数据，包括props、methods、data、computed和watch

2. initData核心代码是将data数据响应化

function initData (vm: Component) {
       // 执行数据响应化 observe(data, true /* asRootData */)}