什么是生命周期？
通俗说就是Vue实例从创建到销毁的过程，就是生命周期
什么是生命周期钩子函数都有哪些？分别是什么意思？
- 组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载，无法访问到数据和真实的dom，一般不做操作
- 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
- 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情…
- 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
- 当更新完成后，执行updated（据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom）
- 经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等,组件的数据绑定、监听…去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以
什么是钩子函数？
- beforeCreate created[可以获取数据及方法]
- beforeMount mounted[可以获取到真实的DOM]
- beforeUpdate updated[数据更新执行]
- beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]
图解
面试回答
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
- 创建前/后： 在beforeCreated阶段，vue实例的挂载元素el还没有。在created阶段,vue实例的数据对象data有了,el还没有.
- 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完，data.message成功渲染。
- 更新前/后：当data变化时，会触发beforeUpdate和updated方法。
- 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
代码分析
{
{msg}}
Vue的DOM异步渲染
- {
{a}}
{
{sum}}
生命周期（其他三个钩子函数）
component 和keep-alive【component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件】
闭合标签使用组件
1、component : 内置组件，根据is属性来显示对应的组件;is属性的属性值保持和组件名字一致；然后可以显示对应的组件
keep-alive : keep: 保持 alive:活力
三个钩子函数详解
- 当keep-alive 缓存组件才会有的生命周期的钩子函数
- activated deactivated
- errorCaptured 当子孙组件出错时，会调用这个钩子函数
// keep-alive 缓存组件 生命周期的钩子函数 activated deactivated // 生命周期的钩子函数 activated() { // 当缓存组件有被显示出来时，会触发这个钩子函数 console.log(100); }, deactivated() { // 当缓存的组件隐藏时，会触发这个钩子函数； console.log(200); }, // 当子孙组件出错时，会调用这个钩子函数 errorCaptured(a, b, c) { // 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。 console.log(a); console.log(b); console.log©; console.log(“子组件报错”) },代码段
本文参考文章：宅男呀的Vue生命周期（11个钩子函数）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218289.html原文链接：https://javaforall.net
