一、概述
我们平时在搭建Vue项目时都是用官网提供的脚手架进行搭建，但对于底层逻辑的东西很少了解，为了帮助大家更深入了解Vue底层原理【快智岛】专门开设了【从源码开始学Vue专栏】和大家一起开启学Vue之旅。
二、渐进式框架
Vue.js 设计的初衷就包括可以被渐进式地采用，下面就渐进式框架结合实际项目给大家加以说明:
将 Vue.js 添加到项目中主要有四种方式
三、了解Vue的引入原理
我们在了解Vue的时候，首先要了解Vue是从哪里来，我们在搭建好的脚手架里面，通过main.js可以找见引入import Vue from 'vue',从从node_modules中找见vue文件夹，进入package.json文件，这个文件的作用是描述整个项目的。在这个文件中存在两个配置字段，它们都是程序的主入口文件。
{
...
"main": "dist/vue.runtime.common.js",
"module": "dist/vue.runtime.esm.js",
"unpkg": "dist/vue.js",
"jsdelivr": "dist/vue.js",
"typings": "types/index.d.ts",
"files": [
"src",
"dist/*.js",
"types/*.d.ts"
],
...
在module的优先级大于main的优先级。在module不存在时，main对应的配置项就是主入口文件。可以看到dist/vue.runtime.esm.js才是主入口文件。在脚手架main.js中，我们可以找见创建Vue实例的代码如下所示:
import Vue from 'vue'
import App from './App.vue'
import router from './router/'
import store from './store/'
import i18n from './locales/'
const vm = new Vue({
router,
store,
i18n,
created: bootstrap,
render: h => h(App)
}).$mount('#app')
export default vm
在dist/vue.runtime.esm.js文件中搜索Vue的定义函数如下:
function Vue (options) {
//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);
}
四、了解Vue的初始化函数
通过上述描述，初始画函数包含在 this._init(options);中，这里的this指的是Vue实例
Vue.prototype._init = function (options) {
var vm = this;
// a uid
vm._uid = uid$3++;
var startTag, endTag;
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = "vue-perf-start:" + (vm._uid);
endTag = "vue-perf-end:" + (vm._uid);
mark(startTag);
}
// a flag to avoid this being observed
vm._isVue = true;
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options);
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
);
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm);
} else {
vm._renderProxy = vm;
}
// expose real self
vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false);
mark(endTag);
measure(("vue " + (vm._name) + " init"), startTag, endTag);
}
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
};
五、render函数
render: h => h(App)是ES6的写法，其实就是如下内容的简写：
# ES5写法
render: function (createElement) {
return createElement(App);
}
# ES6写法
render: createElement => createElement(App)
# h代替createElement
render: h => h(App)
官方文档中是这样的，createElement 是 Vue.js 里面的 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
}
为什么会使用h代替createElement
It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language". 它来自单词 hyperscript，这个单词通常用在 virtual-dom 的实现中。Hyperscript 本身是指
生成HTML 结构的 script 脚本，因为 HTML 是 hyper-text markup language 的缩写（超文本标记语言） 也就是说，createElement 函数是用来生成 HTML DOM 元素的，而上文中的 Hyperscript也是用来创建HTML结构的脚本，这样作者才把 createElement 简写成 h。
而 createElement(也就是h)是vuejs里的一个函数。这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。
其实在vue 1.x 中，这样的写法也就是如下的含义：
new Vue({
el: '#app',
template:'</App>'
componets: {App}
})
然后页面中使用:
<div id='app'>
<app></app>
</div>
其实在vue 2.x 中，这样的写法也就是如下的含义：
const vm = new Vue({
render: h => h(App)
}).$mount('#app')
然后页面中使用:
<div id='app'>
</div>
