总结
秋招即将开始,校招的朋友普遍是缺少项目经历的,所以底层逻辑,基础知识要掌握好!
而一般的社招,更是神仙打架。特别强调,项目经历不可忽视;几乎简历上提到的项目都会被刨根问底,所以项目应用的技术要熟练,底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML,CSS,JavaScript,HTTP,TCP协议,浏览器,Vue框架,算法等高频考点238道(含答案)!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
资料截图 :
高级前端工程师必备资料包
// src/platforms/web/runtime/index.js :37
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
其中核心是mountComponent方法
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
if (process.env.NODE_ENV !== ‘production’) {
/* istanbul ignore if */
if ((vm.KaTeX parse error: Expected 'EOF', got '&' at position 18: …tions.template &̲& vm.options.template.charAt(0) !== ‘#’) ||
vm.$options.el || el) {
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’)
//…
}
这一步主要是判断当前实例是否含有render函数,如果有render函数那么就准备开始执行beforeMount钩子函数,否则直接提示报错“Failed to mount component: template or render function not defined”。
如果使用了runtime-with-compile版本(没有render函数)详情见官网运行时 + 编译器 vs. 只包含运行时 在实例化Vue时,将传入的template通过一系列编译生成render函数。
-
编译这个template,生成AST抽象语法树。
-
优化这个AST,标记静态节点。(渲染过程中不会变得那些节点,优化性能)。
-
根据AST,生成render函数。
对应代码如下:
const ast = parse(template.trim(),options)
if(options.optimize !== false){
optimize(ast,options)
}
const code = generate(ast,options)
总之,在有了render函数之后,就可以进行渲染步骤了,执行beforeMount钩子函数。
beforeMount执行完成之后接着往下走:
//…
callHook(vm,‘beforeMount’)
let updateComponent
/* istanbul ignore if */
if (process.env.NODE_ENV !== ‘production’ && config.performance && mark) {
updateComponent = () => {
const name = vm._name
const id = vm._uid
const startTag = vue-perf-start:${id}
const endTag = vue-perf-end:${id}
mark(startTag)
const 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 = () => {
vm._update(vm._render(), hydrating)
}
}
//…
定义一个渲染组件的函数updateComponent
updateComponent = () => {
vm._update(vm._render,hydrating)
}
vm._render就是调用render函数生成一个vnode,而vm._update方法则会对这个vnode进行patch操作,帮我们把vnode通过cleateElm函数创建新节点,并且渲染到dom中。
//src/core/instance/lifecycle.js :59
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
//…
vm.KaTeX parse error: Expected group after '_' at position 9: el = vm._̲_patch__(vm.el, vnode, hydrating, false /* removeOnly */)
//…
}
看完updateComponent方法里面的具体实现之后
接下来就是要执行,updateComponent方法了。
执行是由Watcher类负责执行的。
//src/core/instance/lifecycle.js :197
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, ‘beforeUpdate’)
}
}
}, true /* isRenderWatcher */)
为什么要用Watcher来执行呢?因为在执行过程中,需要去观测这个函数依赖了哪些响应式的数据,将来在数据更新的时候,我们需要再重新执行updateComponent函数。
如果是更新后调用updateComponent函数,updateComponent内部的patch就不再是初始化的时候创建节点,而是通过diff算法将差异的地方找到,以最小化的代价更新到真实dom上。
Watcher中有一个before方法,逻辑是当vm._isMounted,也就是第一次挂载完成之后,再次更新视图之前,会先调用beforeUpdate钩子函数。
注意:如果在render过程中有子组件的话,此时子组件也会有一系列的初始化过程,也会走之前所说的所有过程,因此这是一个递归构建过程。
当有子组件时生命周期执行过程:
-
父 beforeCreate
-
父 created
-
父 beforeMount之后—>render
-
子 beforeCreate
-
子 created
-
子 beforeMount之后—>render
-
子 mounted
-
父 mounted
//src/core/instance/lifecycle.js :208
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, ‘mounted’)
}
最终mounted生命周期钩子函数触发
更新流程
当一个响应式属性被更新,触发了Watcher的回调函数,也就是updateComponent 方法
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, ‘beforeUpdate’)
}
}
}, true /* isRenderWatcher */)
在更新之前会先进行判断,是否是更新vm._isMounted如果是更新那么就会直接执行beforeUpdate生命周期钩子。
Vue 异步执行 DOM 更新
由于Vue组件的异步更新机制,当响应式数据发生变化,根据数据劫持此时会调用dep.notify(src/core/observer/index.js : 191),之后会在Dep中去遍历所有watcher进行更新subs[i]update()(src/core/observer/dep.js : 47),之后在Watcher中会发现,在调用update方法后,会调用Watcher中的update方法()会发现它执行了一个叫queueWatcher的方法,具体可以看下代码。
// src/core/observer/scheduler.js :164
export function queueWatcher (watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i–
}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true
nextTick(flushSchedulerQueue)
}
}
}
从代码中可以看到,queueWatcher方法主要做了几件事
将watcher存到一个队列queue中, 在nextTick方法中执行flushSchedulerQueue方法
function flushSchedulerQueue () {
currentFlushTimestamp = getNow()
flushing = true
let watcher, id
queue.sort((a, b) => a.id - b.id)
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
if (watcher.before) {
watcher.before()
}
id = watcher.id
has[id] = null
watcher.run()
}
在flushSchedulerQueue方法中主要干的事情就是,遍历执行存放watcher的queue,并且判断如果当前watcher有before方法,那么就先执行watcher.before,此时就会触发之前的callHook(vm, ‘beforeUpdate’)方法,触发beforeUpdate生命周期钩子函数(src/core/instance/lifecycle.js)。而nextTick方法就是将flushSchedulerQueue方法存到一个数组callbacks中
// src/core/util/next-tick.js :87
export function nextTick (cb?: Function, ctx?: Object) {
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, ‘nextTick’)
}
} else if (_resolve) {
_resolve(ctx)
}
})
if (!pending) {
pending = true
timerFunc()
}
}
最终会执行timerFunc方法
//src/core/instance/util/next-tick.js :33
let timerFunc
if (typeof Promise !== ‘undefined’ && isNative(Promise)) {
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== ‘undefined’ && (
isNative(MutationObserver) ||
MutationObserver.toString() === ‘[object MutationObserverConstructor]’
)) {
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
总结
秋招即将开始,校招的朋友普遍是缺少项目经历的,所以底层逻辑,基础知识要掌握好!
而一般的社招,更是神仙打架。特别强调,项目经历不可忽视;几乎简历上提到的项目都会被刨根问底,所以项目应用的技术要熟练,底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML,CSS,JavaScript,HTTP,TCP协议,浏览器,Vue框架,算法等高频考点238道(含答案)!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
资料截图 :
高级前端工程师必备资料包