https://zhuanlan.zhihu.com/p/...什么是vue？每次初始化vue，使用newVue({})，不难发现vue是一个类。通过层层查找，可以找到vue定义的地方//pathsrc/core/instance/index.jsfunctionVue(options){...this._init(options)}这是vue最初定义的地方，newVue执行时，会在内部执行一个this._init(options)将初始化的参数传入~~~~注意：在Vue内部，以_符号开头的变量是供内部私有使用的。以$符号开头的变量是为外部用户提供的。.src/core/instance/index.js文件分析/events'import{lifecycleMixin}from'./lifecycle'import{warn}from'../util/index'//declareconstructorfunctionVue(options){if(process.env.NODE_ENV!=='production'&&!(thisinstanceofVue)){warn('Vue是一个构造函数，应该使用`new`关键字调用')}this._init(options)}//实例属性实例方法initMixin(Vue)//_init()MethodstateMixin(Vue)//$data/$props/$set()$delete()$watch()eventsMixin(Vue)//$emit()/$on()$off()$once()事件相关方法lifecycleMixin(Vue)//_update/$forceUpdate/$destory生命周期相关方法renderMixin(Vue)//$nextTick()/_render()//渲染相关exportdefaultVue将Vue构造函数传递给下面方法initMixin(Vue)definition_init()methodstateMixin(Vue)定义数据相关方法$set()/$delete()/$watch()eventsMixin(Vue)定义事件相关方法$emit()/$on()/$off()/$off()/$oncelifecycleMixin(Vue)定义了_update()和生命周期相关的$forceUpdate/$destoryrenderMixin(Vue)定义了$nextTick()_render将render转化为渲染函数。这些方法在各自的文件中维护如_init()Vue.prototype._init=function(options){//当调用_init方法时，先合并optionsmergeOptions，传入的options与vue的原始选项//在执行一系列初始化操作~~~~}这些初始化完成后，会初始化一些全局APIinitGlobalAPI(Vue)exportfunctioninitGlobalAPI(Vue){Vue.setmethodVue.deleteVue.nextTick内置组件keep-alivetransitiontransition-groupinitUse(Vue)Vue.use()methodinitMixin(Vue)Vue.mixin()methodinitExtend(Vue)Vue.extend()initAssetRegisters(Vue)Vue.component()Vue.directive()Vue.fitler()}Vue的架构设计Vue的架构是分层的。底层是es5的构造函数。上层会定义一些_init,$watch,_render和其他方法。上层会在构造函数上定义一些全局的API，比如setdelete，nextTick等，然后跨平台和服务端的渲染和编译。最后为用户导出一个完整的构造函数。目录结构|--distpackagedversionofvue|--flowtypedetection,3.0改为typeScript|--script构建不同版本vue的相关配置|--src源码|--compiler编译|--core不区分核心平台代码|--components通用抽象组件|--global-api全局API|--instance实例构造函数和原型方法|--observer数据响应|--util常用工具方法|--vdom虚拟dom相关|--platforms不同平台的不同实现|--server服务端渲染|--sfc.vue单文件组件分析|--共享全局通用工具方法flowjavascript是一种弱类型语言，使用flow来定义类型和检测types.src/编译器将template模板编译成render函数src/core平台无关的通用代码，可以运行在任何javascript平台。src/platforms分别针对web平台和weex平台实现，提供统一的API调用。src/observervue监听数据变化，改变视图src/vdom将render函数转换为vnode，这样patch才是真正的dom和diff算法的实现。Vue版本以ES模块为例。它分为运行时版本和完整版本。注意是在vue里面只识别render函数。newVue({data:{message:'23123'},render(h){returnh('div','213')}}).$mount('app')但是我们开发的只是template模板用在。这是因为有vue-loader。它会将我们模板中定义的内容编译成渲染函数。而这个编译过程是区分完整版和运行时版的关键。完整版有这个编译器，运行时版本不包括在内。请问runtime完整版和runtime-only版本的区别？带有编译器的完整版本将大6kb。编译时间不同。编译器在运行时编译。性能上会有一定损失，运行时版本是通过vue-loader做的离线编译。高性能
