源码地址
引入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,这个貌似是服务端渲染才要用到的,个人猜想
然后再到了同目录下的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函数
Render函数
// 这种写法就是最底层的写法,性能最好,但是难以理解,这里方法还有更复杂的方式,后面的两种写法
// 最后会经过一些列的算法,比如AST解析再转换成render函数,最后还是得出这样的形式,这里这种方
// 法不讨论了
第二种:template模板,这里又有三种情况
template模板
// 这是第一种情况
// 这种写法因为没有render函数,则会进入if语句里面,然后这里let template = options.template获取
// 字符串模板后就直接进入compileToFunctions这个方法了
template模板
// 这是第二种情况
// 这种写法因为没有render函数,则会进入if语句里面,然后进入if (template.charAt(0) === '#')
// idToTemplate方法执行,方法解释见methods realizes目录
// 之后就直接进入compileToFunctions这个方法了
template模板
{{msg}} No.1
{{msg}} No.2
// 第三种则走if (template.nodeType)这里,这个就很好理解了,因为这里的template是dom节点
// 所以里面直接就获取innerHTML了,和第二种差不多,只是这里自己手动获取了dom节点
// 之后就直接进入compileToFunctions这个方法了
第三种:el绑定方法,这种便是我们最常用的了
el绑定
{{msg}}
// 这种则走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的渲染机制
剩下的几个问题
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 // 水平有限,看不懂 - -#