https://zhuanlan.zhihu.com/p/...

vue是什么

每次在初始化vue,应用new Vue({})时, 不难发现vue是一个类.
通过一层层的查找,能够找到vue被定义的中央

// 门路 src/core/instance/index.jsfunction Vue(options){    ...    this._init(options)}

这里就是vue最后被定义的中央, 当执行new Vue时, 外部会执行一个this._init(options) 将初始化的参数传入~~~~

留神一点: 在Vue的外部,_符号结尾的变量是供外部公有应用的.而$符号结尾的变量是提供给内部用户应用的.

剖析src/core/instance/index.js文件

import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'import { warn } from '../util/index'// 申明构造函数function Vue (options) {  if (process.env.NODE_ENV !== 'production' &&    !(this instanceof Vue)  ) {    warn('Vue is a constructor and should be called with the `new` keyword')  }  this._init(options)}// 实例属性  实例办法initMixin(Vue)  // _init()办法stateMixin(Vue) // $data/$props/ $set() $delete()  $watch()eventsMixin(Vue)  // $emit() / $on() $off()  $once()  事件相干办法lifecycleMixin(Vue)  // _update / $forceUpdate/ $destory  生命周期相干办法renderMixin(Vue) // $nextTick()/ _render() // 渲染相干export default Vue

将vue构造函数传入到以下办法中

initMixin(Vue) 定义_init()办法stateMixin(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办法时  先进行选项合并mergeOptions,将传入的选项和vue的原始选项进行合并操作    // 在进行一系列的初始化操作~~~~}

在这些初始化实现之后,会初始化一些全局api initGlobalAPI(Vue)

export function initGlobalAPI(Vue){    Vue.set 办法    Vue.delete    Vue.nextTick        内置组件    keep-alive    transition    transition-group            initUse(Vue)      Vue.use() 办法    initMixin(Vue)    Vue.mixin()办法    initExtend(Vue)   Vue.extend()    initAssetRegisters(Vue)  Vue.component() Vue.directive() Vue.fitler()}

Vue的架构设计

Vue架构是分层式的.最底层是es5的一个构造函数.再下层会定义一些_init,$watch,_render等办法. 再下层会在构造函数上定义一些全局的API, 比方set delete, nextTick等.接着是跨平台和服务端渲染以及编译器.最初导出一个残缺的构造函数给用户应用.

目录构造

|-- dist  打包后的vue版本|-- flow  类型检测，3.0换了typeScript|-- script  构建不同版本vue的相干配置|-- src  源码    |-- compiler  编译器    |-- core  不辨别平台的外围代码        |-- components  通用的形象组件        |-- global-api  全局API        |-- instance  实例的构造函数和原型办法        |-- observer  数据响应式        |-- util  罕用的工具办法        |-- vdom  虚构dom相干    |-- platforms  不同平台不同实现    |-- server  服务端渲染    |-- sfc  .vue单文件组件解析    |-- shared  全局通用工具办法
  • flow javascript是弱类型语言, 应用flow定义类型及检测类型.
  • src/compiler 将template模板编译成render函数
  • src/core 与平台无关通用代码, 能够运行在任何javascript平台上
  • src/platforms 针对web平台和weex平台别离的实现，并提供对立的API供调用。
  • src/observer vue监听数据变动, 以及扭转视图
  • src/vdom 将render函数转为vnode从而patch为实在dom 以及diff算法的实现

Vue版本

以ES module为例. 分为运行时版本和残缺版本
留神在vue外部只认render函数.

    new Vue({        data: {            message: '23123'        },        render(h){            return h('div', '213')        }    }).$mount('app')

然而咱们在开发中只应用了template模板. 这是因为有vue-loader.它会将咱们的template模板内定义的内容编译为render函数. 而这个编译过程就是辨别残缺版本和运行时版本的要害.完整版带有这个编译器,而运行时版本就不带.

请问runtime 完整版和runtime-only 运行版这两个版本的区别

  1. 带编译器的完整版会大6kb
  2. 编译机会不同, 编译器是运行时编译.性能会有肯定损耗
    而运行时版本是通过vue-loader做的离线编译.性能高