最后
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
同时，也会运行一些叫作生命周期钩子的函数，给在不同阶段添加自定义代码的机会。
Vue.js生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段、卸载阶段。
初始化阶段
new Vue（）到created之间的阶段叫作初始化阶段。
这个阶段的主要目的是在Vue.js实例上初始化一些属性、事件以及响应式数据，如props、methods、data、computed、watch、provide和inject等。
模板编译阶段
在created钩子函数与beforeMount钩子函数之间的阶段是模板编译阶段。
这个阶段的主要目的是将模板编译为渲染函数，只存在于完整版中。如果在只包含运行时的构建版本中执行new Vue（），则不会存在这个阶段。
当使用vue-loader或vueify时，*.vue文件内部的模板会在构建时预编译成Javascript，所以最终打好的包里是不需要编译器的，用运行时版本即可。由于模板这时已经预编译成了渲染函数，所以在生命周期中并不存在模板编译阶段，初始化阶段的下一个生命周期直接是挂载阶段。
挂载阶段
beforeMount钩子函数到mounted钩子函数之间的是挂载阶段。
在这个阶段，Vue.js会将其实例挂载到DOM元素上，通俗地讲，就是讲模板渲染到指定的DOM元素中。
在挂载的过程中，Vue.js会开启Watcher来持续追踪依赖的变化。
在已挂载状态下，Vue.js仍会持续追踪状态的变化。当数据（状态）发生变化时，Watcher会通知虚拟DOM重新渲染视图，并且会在渲染视图前出发beforeUpdate钩子函数，渲染完毕后触发updated钩子函数。
通常，在运行时的大部分时间下，Vue.js处于已挂载状态，每当状态发生变化时，Vue.js都会通知组件使用虚拟DOM重新渲染，也就是常说的响应式。这个状态会持续到组件被销毁。
卸载阶段
应用调用vm.$destroy方法后，Vue.js的生命周期会进入卸载阶段。
**vm.$destroy**我们在上一篇文章中实现过：学习vue源码（15）手写 f o r c e U p d a t e , v m . forceUpdate,vm. forceUpdate,vm.destroy方法
在这个阶段，Vue.js会将自身从父组件中删除，取消实例上所有依赖的追踪并且移除所有的事件监听器。
小结
生命周期可以在整体上分为两部分
1、第一部分是初始化阶段、模板编译阶段与挂载阶段。
2、第二部分是卸载阶段。
卸载阶段的内部原理就是vm.$destroy方法的内部原理。模板编译阶段和挂载阶段（mount）的原理已述过，见前面文章。现在主要介绍初始化阶段的内部原理。
new Vue()被调用时发生了什么
当new Vue()被调用时，会首先进行一些初始化操作，然后进入模板编译阶段，最后进入挂载阶段。
function Vue(optipons){
if(process.env.NODE_ENV !== ‘production’&&
!(this instanceof Vue)
){
warn(‘Vue is a constructor and should be called with the ‘new’ keyword’)
}
this._init(options);
}
export default Vue;
1、首先进行安全检查。在非生产环境下，如果没有使用new调用Vue，则会在控制台抛出错误警告：Vue是构造函数，应该使用new关键字来调用。
2、然后调用this._init(options)来执行生命周期的初始化流程。即生命周期的初始化流程在this._init中实现。
（1）Vue.js通过调用initMixin方法将_init挂载到Vue构造函数的原型上。
import { initMinxin } from ‘./init’
function Vue(optipons){
if(process.env.NODE_ENV !== ‘production’&&
!(this instanceof Vue)
){
warn(‘Vue is a constructor and should be called with the ‘new’ keyword’)
}
this._init(options);
}
initMinxin(Vue);
export default Vue;
（2）将init.js文件导出的initMixin函数导入后，通过调用initMixin函数向Vue构造函数的原型中挂载一些方法。
export function initMixin(Vue){
Vue.prototype._init = function(options){
}
}
在Vue构造函数的prototype属性上添加了一个_init方法。即_init方法方法的定义与前面介绍的Vue.js实例方法的挂载方式是相同的。
当new Vue()执行后，触发的一系列初始化流程都是在_init方法中启动的。
（1）实现
Vue.prototype._init = function(options){
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(VM,‘beforeCreate’);
initInjections(vm);//在data/props前初始化inject
initState(vm);
initProvide(vm);//在data/props前初始化provide
callHook(vm,‘created’);
//如果用户在实例化Vue.js时传递了el选项，则自动开启模板编译阶段与挂载阶段
//如果没有传递el选项，则不进入下一个生命周期流程
//用户需要执行vm.$mount方法，手动开启模板编译阶段与挂载阶段
if(vm.$options.el){
vm. m o u n t ( v m . mount(vm. mount(vm.options.el);
}
}
1、Vue.js会在初始化流程的不同时期通过callHook函数触发生命周期钩子。
2、在执行初始化流程之前，实例上挂载了$options属性。目的是将用户传递的options选项与当前构造函数的options属性及其父级实例构造函数的options属性，合并生成一个新的options并赋值给$options属性。
3、resolveConstructorOptions函数的作用就是获取当前实例中构造函数的options选项及其所有父级的构造函数的options。之所以会有父级，是因为当前Vue.js实例可能是一个子组件，它的父组件就是它的父级。
4、在生命周期钩子beforeCreate被触发之前执行了initLifecycle、initEvents和initRender。
5、在初始化的过程中，首先初始化事件与属性，然后触发生命周期钩子beforeCreate。
6、随后初始化provide/inject和状态，这里的状态指的是props、methods、data、computed以及watch。
7、解这触发生命周期钩子created。
8、最后，判断用户是否在参数中提供了el选项，如果是，则调用vm.$mount方法，进入后面的生命周期阶段。
（1）Vue.js通过callHook函数来触发生命周期钩子。
（2）callHook的作用是触发用户设置的生命周期钩子，而用户设置的生命周期钩子会在执行new Vue（）时通过参数传递给Vue.js。也就是说，可以在Vue.js的构造函数中通过options参数得到用户设置的生命周期钩子。
（3）用户传入的options参数最终会与构造函数的options属性合并并生成新的options并赋值到vm.$options属性中，所以可以通过vm.$options得到用户设置的生命周期函数。例如，通过vm.$options.created得到用户设置的created钩子函数。
（4）Vue.js在合并options的过程中会找出options中所有key是钩子函数的名字，并将它转换成数组。
（5）所有生命周期钩子的函数名
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
activated
deactivated
errorCaptured
（6）通过vm.$options.created获取的是一个数组，数组中包含了钩子函数。
console.log(vm.$options.created)//[fn]
数组原因：可能存在多个钩子函数，例如mixin混入的和用户自己设置的。转换成数组后，可以在同一个生命周期钩子列表中保存多个生命周期钩子。
（7）实现原理
只需要从vm.$options中获取生命周期钩子列表，遍历列表，执行每一个生命周期钩子，就可以触发钩子函数。
export function callHook(vm,hook){
const handlers = vm.$options[hook];
if(handlers){
for(let i = 0,j = handlers.length ; i<j;i++){
try{
handlers[i].call(vm);
}catch(e){
handleError(e,vm,‘${hook}hook’)
}
}
}
}
1、callHook接收vm和hook两个参数，其中前者是Vue.js实例的this，后者是生命周期钩子的名称。
2、使用hook从vm.$options中获取钩子函数列表后赋值给handlers，随后遍历handlers，执行每一个钩子函数。
3、使用try…catch语句捕获钩子函数发生的错误，并使用handleError处理错误。handleError会依次执行父组件的errorCaptured钩子函数与全局的config.errorHandler，这也是为什么生命周期钩子errorCaptured可以捕获子孙组件的错误。
Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
ue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
