关于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做的离线编译.性能高