Vue原理解(一): Vue 是什么？-CSDN博客

本文链接：https://blog.csdn.net/chenzhizhuo/article/details/101110211

Vue, 现阶段受热指数上升比较块的前端架构。有必要从源码的角度，对它的功能的实现原理一窥究竟。看源码一般主要看两样东西，从宏观角度是它的设计思想和实现原理；微观上则是编程技巧。这里我们侧重点是实现原理上。
Vue 原理概要(< V3.0)
在这里插入图片描述

vue 是什么？
我们在使用vue时，初始化操作都会使用new Vue({…})，不难发现 vue 其实是一个类。不过ES6普及的今天，vue 的定义任是普通构造函数。为什么不用 ES6的class 呢？稍后会介绍。首先来看看vue 被定义的地方：

function  Vue(options) {
    ...
    this._init(options)
}

这里省略掉了，flow的类型检查及一些边界情况的源码及讲解。比如省略号这里边界情况是使用必须是new Vue() 的形式，否则会报错。
其实vue 源码就像一颗树，在看之前最好先确定看什么功能，避开那些分叉逻辑。
我们接下来的目标就是从new Vue()开始，走完一整条从初始化，数据，模板到真实Dom的这整个流程

当执行new Vue时，内部会执行一个方法 this._init(options), 将初始化的参数传入。
*这里在vue的内部，使用 _ 符号开头定义私有变量，使用 $符号定义供用户使用的变量* 。且用户定义的变量不能以_或$ 开头，以防止内部冲突。
我们接着看：

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'

function Vue(options) {
  ...
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

现在我们讲解下上面提到的为什么不采用ES6的class来定义。因为这样可以方便的把vue的功能拆分到不同的目录中去维护，将 vue 的构造函数传入到以下方法内（这里通过注入方式给Vue扩展API）：

initMixin(Vue): 定义 _init 方法。
stateMixin(Vue): 定义数据相关的方法$set, $delete, $watch 方法。
eventsMixin(Vue): 定义事件相关的方法$on, $once, $off, $emit。
lifecycleMixin(Vue): 定义_update, 及生命周期相关的 $f o r c e U p d a t e 和$ destroy。
renderMixin(Vue): 定义$nextTick, _render 将render函数转为vnode。

这些方法都在各自的文件内维护，从而让代码结构更加清晰易懂可维护。如 this._init 方法被定义在：

export function initMixin(Vue) {
  Vue.prototype._init = function(options) {
    ...当执行new Vue时，进行一系列初始化并挂载
  }
}

再这些 xxxMixin 完成后，接着会定义一些全局的API：

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.filter方法
}

这里有部分 api 和 xxxMixin 定义的原型方法功能是类似的，如 this.$set 和 Vue.set 他们都是使用set 这样一个内部定义的方法。

这里提一下 vue 的架构设计，它的架构是分层式的。最顶层是一个ES5 的构造函数，在上层在原型上会定义一些==_init==, $watch, _render 等这样的方法，再上层会在构造函数自定义全局的一些API, 如 set, nextTick, use 等（以上这些事不区分平台的核心代码）, 接着是跨平台和服务端渲染及编译器。这些属性方法都定义好了以后，最后导出一个完整的构造函数给到用户使用。 new Vue 就是开启的钥匙。

上面我们从比较微观的角度近距离的观察了vue, 现在我们从宏观角度来了解他内部的代码结构是如何组建起来的。目录如下：

|-- 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  全局通用工具方法
|-- test 测试

flow: javascript 是弱类型语言，使用 flow 以定义类型和检测类型，增加代码的健壮性。
src/compiler: 将template 模板编译为 render 函数。
src/core: 与平台无关通用的逻辑，可以运用在任何javaScript 环境下：如 web, Node.js weex 嵌入原生应用中。
src/platforms: 针对web 平台和 weex 平台分别的实现，并提供统一的 API供调用。
src/observer: vue 检测数据变化，改变视图的代码实现。
src/vdom: 将render 函数转为 vnode 从而 patch 为真实 dom 以及diff 算法的代码实现。
dist: 存放着针对不同使用方式的不同vue版本

Vue 版本

vue 使用的是rollup构建的，具体怎么构建不重要，总之会构建出很多不同版本vue。按使用方式的不同，可分为以下三类：

UMD: 通过 script 标签直接在浏览器中使用。
CommonJS: 使用比较旧的打包工具使用，如 webpack1。
ES Module: 配合现代打包工具使用，如 webpack2 及以上。

而每个使用方式内又分为了完整版和运行时版本，这里主要以 ES Module 为例，有了官方脚手架其它两类应该没多少人用了。在介绍两个版本区别之前，我们先插入一个小广告。即：在vue的内部是只认render 函数的，我们自定义一个render函数：

new Vue({
  data: {
    msg: 'hello Vue!'
  },
  render(h) {
    return h('span', this.msg);
  }
}).$mount('#app');

为什么只认render 函数，我们在写代码的时候好似并没有些过render函数，而是使用template 模板。这是因为有 vue-loader，它会将我们在template内定义的内容编译为render 函数，而这个编译就是区分完整版和运行时版本的关键所在，完整版自带这个编译器，而运行时版本就没有。如下代码在运行时版本环境下就会报错：

new Vue({
  data: {
    msg: 'hello Vue!'  
  },
  template: `<div>{{msg}}</div>`
})

vue-cli 默认是使用运行时版本的，更改或覆盖脚手架内的默认配置，将其更改为完整版即可通过编译： ‘vue$’: ‘vue/dist/vue.esm.js’, 推荐还是使用运行时版本。

下面带着一个问题结束本章的内容。

请问runtime 和 runtime-only 这两个版本的区别是？
解答：
最明显的就是大小写区别，带编译器会比不带的版本大6kb。
编译的时机不同，编译器是运行时编译，性能会有一定的损耗；运行时版本是借助loader 做的离线编译，运行性能更高。

下一篇 Vue原理解析（二）：初始化时beforeCreate之前做了什么