Web前端最全从源码看Vue生命周期，2024年最新web前端工程师的面试题目及答案

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 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道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包