引入Vue后进行了global-api的初始化，那么现在就到了第二步的初始化，文件入口为：
src\entries\web-runtime.js
首先是4个方法绑定在Vue.config上
isUnknownElement --方法解释看methods realizes目录 源码在platforms\web\util\element.js
isReservedTag --方法解释看methods realizes目录 源码在platforms\web\util\element.js
getTagNamespace --这个方法就不做解释了比较简单 源码在platforms\web\util\element.js
mustUseProp --方法解释看methods realizes目录 源码在platforms\web\util\attrs.js
然后这里到了extend方法，这个和Vue.extend不一样的，我们来看一下src\shared\util
export function extend (to: Object, _from: ?Object): Object {
for (const key in _from) {
to[key] = _from[key]
}
return to
}
好吧，这个就是object的继承吧，把后者的属性赋值给前者，最后返回前者，然后我们找到这两个东西
-
platforms/web/runtime/directives/index
-
platforms/web/runtime/components/index
这两个文件夹里面有6个js文件，很熟悉的东东，就是常用的v-model,v-show,transition组件了，在上
一篇有提到过的
// 还记得Vue.options这个值是这样的
Vue.options = {
components: {
KeepAlive: {
},
// 这两个是Vue自带的，在另一个地方初始化的，这里暂时这样理解就好，存在这两个方法的
Transition: {
},
TransitionGroup: {
},
my-component: {
}
},
directives: {
// 这两个是Vue自带的，在另一个地方初始化的，这里暂时这样理解就好，存在这两个方法的
model: {
},
show: {
},
// 如果经过了第一种方法注册指令，那么就会添加下面一个了
demo: {
bind: function () {
// some methods
}
}
},
filters: {}
}
那么自带的东东就是在这里初始化的了通过这两个操作，这里水平有限，暂时搁着 - -#
-
extend(Vue.options.directives, platformDirectives)
-
extend(Vue.options.components, platformComponents)
然后到了Vue.prototype.patch
这个东西涉及太多，包括vdom和渲染rander等等，水平有限，暂时搁着 - -#
主要就是看这个Vue.prototype.$mount
这里有个query(el)，这个源码在platforms\web\util\index.js里面，主要就是获取el这个dom元素
然后执行this._mount(el, hydrating)，这个方法后续再讲，这个是Vue实例启动了的方法，至于第二个
参数hydrating，<span style="font-weight: bold;margin-bottom: 10px;color: #FF0000">这个貌似是服务端渲染才要用到的，个人猜想</span>
然后再到了同目录下的web-runtime-with-compiler.js文件，这个文件重写了$mount方法，查了下资料以及
官方的说法大概就是，独立构建时带有模板编译功能的初始化方法，还是直接看代码吧
首先const mount = Vue.prototype.$mount缓存了上面的$mount方法，然后重写，query(el)获取dom，
然后判断dom不能是body标签或者html标签，获取this.$options，这个实际上就是new Vue传入的参数
后面讲数据绑定的时候会经常用到，这里举个栗子说明一下吧：
var options = {
el: '#app',
data () {
return {
msg: 'hello world'
}
}
}
new Vue(options)
// 这个就是这个options，一个对象字面量，然后有if (!options.render)这样的一个判断，这里要
// 说下Vue的三种写法：Render函数，template模板，el绑定
第一种：Render函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Render函数</title>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
var options = {
el: '#app',
data () {
return {
msg: 'hello world'
}
},
render: function (createElement) {
return createElement('h1', this.msg)
}
}
new Vue(options)
</script>
</html>
// 这种写法就是最底层的写法，性能最好，但是难以理解，这里方法还有更复杂的方式，后面的两种写法
// 最后会经过一些列的算法，比如AST解析再转换成render函数，最后还是得出这样的形式，这里这种方
// 法不讨论了
第二种：template模板，这里又有三种情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template模板</title>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
var options = {
el: '#app',
data () {
return {
msg: 'hello world'
}
},
template: '<h1 style="color: red;">{{msg}}</h1>'
}
new Vue(options)
</script>
</html>
// 这是第一种情况
// 这种写法因为没有render函数，则会进入if语句里面，然后这里let template = options.template获取
// 字符串模板后就直接进入compileToFunctions这个方法了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template模板</title>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script id="my-tel">
`<h1 style="color: blue;">{{msg}}</h1>`
</script>
<script>
var options = {
el: '#app',
data () {
return {
msg: 'hello world'
}
},
template: '#my-tel'
}
new Vue(options)
</script>
</html>
// 这是第二种情况
// 这种写法因为没有render函数，则会进入if语句里面，然后进入if (template.charAt(0) === '#')
// idToTemplate方法执行，方法解释见methods realizes目录
// 之后就直接进入compileToFunctions这个方法了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template模板</title>
</head>
<body>
<div id="app">
</div>
<template id="typeByMe">
<div>
<p style="color: red">{{msg}} No.1</p>
<p style="color: blue">{{msg}} No.2</p>
</div>
</template>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
var options = {
el: '#app',
data () {
return {
msg: 'hello world'
}
},
template: document.getElementById('typeByMe')
}
new Vue(options)
</script>
</html>
// 第三种则走if (template.nodeType)这里，这个就很好理解了，因为这里的template是dom节点
// 所以里面直接就获取innerHTML了，和第二种差不多，只是这里自己手动获取了dom节点
// 之后就直接进入compileToFunctions这个方法了
第三种：el绑定方法，这种便是我们最常用的了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>el绑定</title>
</head>
<body>
<div id="app">
<p style="color: blue">{{msg}}</p>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
var options = {
el: '#app',
data () {
return {
msg: 'hello world'
}
}
}
new Vue(options)
</script>
</html>
// 这种则走template = getOuterHTML(el)这个方法，这里el就是dom节点，通过query(el)方法获取的
// getOuterHTML方法就在下面，获取元素的el元素的html片段，最后template也是一段字符串模板了
// 之后就直接进入compileToFunctions这个方法了，这个方法先不看了，很复杂
// 这个方法返回对象{ render, staticRenderFns }，然后绑定在options上面
// options.render = render 也就是下面这个方法
function anonymous() {
with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticStyle:{"color":"blue"}},[_v(_s(msg))])])}
}
这个并不是一个自定义的方法名字，它的创建其实是这样子的，算是一种比较特殊的创建函数方式
var code = 'var co = 12;co = co + 1;return co'
var a = new Function(code)
console.log(a)
输出 =>
function anonymous() {
var co = 12;co = co + 1;return co
}
console.log(a())
输出 => 13
最后还是调用先前缓存下来的mount方法，这个下一节再说
关于这个可以参考这位大神的文章
【Vue源码探究二】从 $mount 讲起，一起探究Vue的渲染机制
<p style="font-weight: bold;margin-bottom: 10px;color: #FF0000">剩下的几个问题</p>
Vue.set = set // 涉及到Vue的数据响应式系统，先保留
Vue.delete = del // 涉及到Vue的数据响应式系统，先保留
Vue.nextTick = util.nextTick // 水平有限，看不懂 - -#
initMixin(Vue) // 这个后面再讲
initExtend(Vue) // 水平有限，看不懂 - -#
extend(Vue.options.directives, platformDirectives) // 水平有限，看不懂 - -#
extend(Vue.options.components, platformComponents) // 水平有限，看不懂 - -#
Vue.prototype.__patch__ // 水平有限，看不懂 - -#
compileToFunctions // 水平有限，看不懂 - -#
网友评论