讲完了数据劫持原理和一堆初始化，现在是DOM相关的代码了。
上一节是从这个函数开始的：
// Line-3924
Vue.prototype._init = function(options) {
// 大量初始化
// ...
// Go!
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
};弄完data属性的数据绑定后，开始处理el属性，也就是挂载的DOM节点，这里的vm.$options.el也就是传进去的’#app’字符串。
有一个值得注意的点是，源码中有2个$mount函数都是Vue$3的原型函数，其中一个标记了注释public mount method，在7531行，另外一个在9553行。打断点进入的是后面，因为定义的晚，覆盖了前面的函数。
// Line-7531
// public mount method
Vue$3.prototype.$mount = function(el,hydrating) {
el = el && inBrowser ? query(el) : undefined;
return mountComponent(this, el, hydrating)
}; // Line-9552
var mount = Vue$3.prototype.$mount;
Vue$3.prototype.$mount = function(
el,
hydrating
) {
// ...很多代码
return mount.call(this, el, hydrating)
};
现在进入后面的$mount函数看看内部结构：
// Line-9552
var mount = Vue$3.prototype.$mount;
Vue$3.prototype.$mount = function(el,hydrating) {
// 将el格式化为DOM节点
el = el && query(el);
// 判断是否挂载到body或者html标签上
if (el === document.body || el === document.documentElement) {
"development" !== 'production' && warn(
"Do not mount Vue to <html> or <body> - mount to normal elements instead."
);
return this
} var options = this.$options;
// 处理template/el 转换为渲染函数
if (!options.render) {
// ...非常多代码
}
return mount.call(this, el, hydrating)
};
代码前半段首先将el转换为DOM节点，并判断是否挂载到body或者html标签，看看简单的query函数：
// Line-4583
function query(el) {
// 如果是字符串就调用querySelector
if (typeof el === 'string') {
var selected = document.querySelector(el);
if (!selected) {
"development" !== 'production' && warn(
'Cannot find element: ' + el
);
// 找不到就返回一个div
return document.createElement('div')
}
return selected
}
// 不是字符串就默认传进来的是DOM节点
else {
return el
}
}
函数比较简单，值得注意的几个点是，由于调用的是querySelector方法，所以可以传标签名、类名、C3新选择器等，都会返回查询到的第一个。当然，总是传一个ID或者确定的DOM节点才是正确用法。
