0
点赞
收藏
分享

微信扫一扫

vue初始化过程

从入口文件(platforms/web/entry-runtime-with-compiler.js)中查找

  • web 平台相关的入口
  • 重写了平台相关的$mount()方法
  • 注册了Vue.compile()方法,传递一个HTML字符串返回render函数
  • 从vue源码目录中可以看到,当我们运行npm run dev得时候入口文件是 src/platforms/web/entry-runtime-with-compiler.js,我们在vue入口文件中初步分析了里面的代码,然后我们在入口文件中可以看到里面引入的Vue是这段代码import Vue from './runtime/index'

runtime/index

  • web 平台相关
  • 注册和平台相关的全局指令: v-modal、v-show
  • 注册和平台相关的全局组件: v-transition、v-transition-group
  • 全局方法
    • patch: 把虚拟dom转换成真实dom
    • $mount: 挂载方法
  • 依然没有找到vue的构造函数,所以我们在这个文件上方的import Vue from 'core/index'从core/index中继续寻找
    在这里插入图片描述

core/index

  • 与平台无感
  • 设置了vue的静态方法,initGlobalAPI
  • 这个文件中重点是initGlobalAPI来给vue的构造函数增加了一些静态方法,但是我们 依然没找到vue的构造函数 所以 我们继续向import Vue from './instance/index'这段代码中寻找
    在这里插入图片描述

instance/index

  • 与平台无关
  • 定义了构造函数,调用了this._init(options)方法
  • 给vue注入了常用的实例成员

在这里插入图片描述

举报

相关推荐

0 条评论