关于vue.js:vue原理解析一-vue是什么

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

vue 是什么

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

// 门路 src/core/instance/index.js
function 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()/$once
lifecycleMixin(Vue) 定义了_update() 以及生命周期相干的 $forceUpdate/ $destory
renderMixin(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 做的离线编译. 性能高