标签：原因 turn child 性能 ndt return mount挂载 研究 div
源码如下：
var mount = Vue.prototype.$mount; Vue.prototype.$mount = function ( el, hydrating ) { el = el && query(el); //query是看el是字符串还是组件，如果是字符串就去document.querySelector(el)，如果查找到就返回return document.createElement(‘div‘)，这也是为什么挂载的dom变成div的原因
/* istanbul ignore if */ if (el === document.body || el === document.documentElement) { //不能挂载在body,html warn( "Do not mount Vue to <html> or <body> - mount to normal elements instead." ); return this } var options = this.$options; // resolve template/el and convert to render function if (!options.render) { //判断是否有render,这也就是我们创建vue项目的时候会让选是Runtime Only 还是 Runtime+Compiler（现在默认选only），看源码推荐Compiler版本，因为抛开 webpack 的 vue-loader
var template = options.template; if (template) { if (typeof template === ‘string‘) { if (template.charAt(0) === ‘#‘) { template = idToTemplate(template); //这个定义如下const idToTemplate = cached(id => { const el = query(id) return el && el.innerHTML})，看字段是添加缓存还没研究
/* istanbul ignore if */ if (!template) { warn( ("Template element not found or is empty: " + (options.template)), this ); } } } else if (template.nodeType) { template = template.innerHTML; } else { { warn(‘invalid template option:‘ + template, this); } return this } } else if (el) { template = getOuterHTML(el); //如果不是模板，就获取dom结构，这个返回会是string .例如‘<div class=‘app‘><div></div></div>‘ } if (template) { /* istanbul ignore if */ if (config.performance && mark) { mark(‘compile‘); //埋点，不影响读源码，估计是对之后性能优化帮助 } var ref = compileToFunctions(template, { outputSourceRange: "development" !== ‘production‘, shouldDecodeNewlines: shouldDecodeNewlines, shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref, delimiters: options.delimiters, comments: options.comments }, this); var render = ref.render; var staticRenderFns = ref.staticRenderFns; options.render = render; //这步其实是最重要的拿到render，Compiler版本就是去进行一系列判断然后编译模板template，将它转换成render函数。所以上面的一系列的操作就是为了获取render函数。只是vue提供了很多种方法去编译。
然后去调用mountComponent方法
options.staticRenderFns = staticRenderFns; /* istanbul ignore if */
if (config.performance && mark) {
mark(‘compile end‘);
measure(("vue " + (this._name) + " compile"), ‘compile‘, ‘compile end‘);
}
}
}
return mount.call(this, el, hydrating)
};
Vue.prototype.$mount = function ( el, hydrating ) { el = el && inBrowser ? query(el) : undefined; return mountComponent(this, el, hydrating) //这里会调用到mountComponent方法 };
function mountComponent ( //核心就是把render渲染成vnode，然后实例化一个渲染Watcher，在它的回调函数中会掉用updateComponent方法，最终调用vm._update更新DOM，会完成整个渲染工作
el,
vm, hydrating ) { vm.$el = el; if (!vm.$options.render) { vm.$options.render = createEmptyVNode; { /* istanbul ignore if */ if ((vm.$options.template && vm.$options.template.charAt(0) !== ‘#‘) || vm.$options.el || el) { warn( //就是用runtime-only版本，已经写render了，还写template会报warn ‘You are using the runtime-only build of Vue where the template ‘ + ‘compiler is not available. Either pre-compile the templates into ‘ + ‘render functions, or use the compiler-included build.‘, vm ); } else { warn( ‘Failed to mount component: template or render function not defined.‘, vm ); } } } callHook(vm, ‘beforeMount‘); var updateComponent; /* istanbul ignore if */ if (config.performance && mark) { updateComponent = function () { var name = vm._name; var id = vm._uid; var startTag = "vue-perf-start:" + id; var endTag = "vue-perf-end:" + id; mark(startTag); var vnode = vm._render(); mark(endTag); measure(("vue " + name + " render"), startTag, endTag); mark(startTag); vm._update(vnode, hydrating); mark(endTag); measure(("vue " + name + " patch"), startTag, endTag); }; } else { updateComponent = function () { vm._update(vm._render(), hydrating); }; } // we set this to vm._watcher inside the watcher‘s constructor // since the watcher‘s initial patch may call $forceUpdate (e.g. inside child // component‘s mounted hook), which relies on vm._watcher being already definedWatcher在这里起到两个作用，一个是初始化的时候会执行回调函数，另一个是当 vm 实例中的监测的数据发生变化的时候执行回调函数,都会调用updateComponent方法
new Watcher(vm, updateComponent, noop, { before: function before () { if (vm._isMounted && !vm._isDestroyed) { callHook(vm, ‘beforeUpdate‘); } } }, true /* isRenderWatcher */); hydrating = false; // manually mounted instance, call mounted on self // mounted is called for render-created child components in its inserted hook
函数最后判断为根节点的时候设置vm._isMounted为true， 表示这个实例已经挂载了，同时执行mounted钩子函数。 这里注意vm.$vnode表示 Vue 实例的父虚拟 Node，所以它为Null则表示当前是根 Vue 的实例
if (vm.$vnode == null) { vm._isMounted = true; callHook(vm, ‘mounted‘); } return vm }
标签：原因 turn child 性能 ndt return mount挂载 研究 div
原文地址：https://www.cnblogs.com/TTblog5/p/12857696.html
