vue生命周期详解面试题,VUE 生命周期
本文详细解释了Vue的生命周期，并通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
这个博客将从以下四个常见的应用程序中解释组件的生命周期，以及每个生命周期应该做什么。
单个组件的生命周期、父子组件的生命周期、兄弟组件的生命周期、宏mixin的生命周期：创建、初始化数据、编译模板、挂载Dom渲染、更新渲染、卸载等一系列过程。对于Vue实例，我们称之为Vue的生命周期，每个阶段都有相应的事件挂钩。
1. 生命周期钩子函数
下图是vue生命周期各阶段的实现：
注意：
created stage中的ajax请求和mounted请求的区别：前者的页面视图不会出现，如果请求中的信息过多，页面会长时间处于白屏状态。
Mounted并不保证所有子组件都会一起安装。如果您想等到整个视图渲染完毕
完了，可以用vm了。$nextTick
vue2.0之后，主动调用$destroy()不会移除dom节点。作者不建议直接销毁。如果您真的需要这样做，您可以手动删除这个生命周期钩子中的dom节点。
2. 单个组件的生命周期
根据实际代码执行：
模板
差异
H3单一成分/h3
El-button @ click= data var=1 update { { data var } }/El-button
El-button @ click= handle destroy destroy/El-button
/div
/模板
导出默认值{
data() {
返回{
数据变量：1
}
},
创建之前(){
this.compName=single
console . log(`-$ { this . compname }-before create `)
},
已创建(){
console . log(`-$ { this . compname }-created `)
},
beforeMount() {
console . log(`-$ { this . compname }-before mount `)
},
已安装(){
console . log(`-$ { this . compname }-mounted `)
},
更新之前(){
console . log(`-$ { this . compname }-before update `)
},
已更新(){
console . log(`-$ { this . compname }-updated `)
},
销毁前(){
console . log(`-$ { this . compname }-before destroy `)
},
销毁(){
console . log(`-$ { this . compname }-destroyed `)
},
方法：{
handleDestroy() {
这个。$destroy()
}
}
}
初始化组件时，打印：
当数据中的值改变时，打印：
当组件被销毁时，打印：
从打印结果可以看出：
当组件初始化时，只执行四个钩子函数，创建/创建前/挂载/挂载前。
当数据中定义的变量(响应变量)改变时，执行beforeUpdate/updated钩子函数。
当一个组件被切换时(当前组件不被缓存)，beforeDestory/destroyed钩子函数被执行。
初始化和销毁时的生命钩子函数只会执行一次，beforeUpdate/updated可以执行多次。
3. 父子组件的生命周期
使用单个组件作为基本组件(因为props没有在beforeCreate()中初始化)，需要进行以下更改：
道具：{
计算机名：{
类型：字符串，
默认：“单一”
}
},
创建之前(){
//this.compName=single
//console . log(`-$ { this . compname }-before create `)
Console.log(` -数据未初始化-创建前)
},
父组件代码如下：
模板
div class=复杂
H3复杂组件/h3
生命周期-单一计算机名=子/生命周期-单一
/div
/模板
const COMPONENT_NAME=复杂
从导入生命周期Single。/LifeCycleSingle
导出默认值{
创建之前(){
console . log(`-$ {组件名称} -创建前`)
},
已创建(){
console . log(`-$ {组件名称} -已创建`)
},
beforeMount() {
console . log(`-$ {组件名称} - beforeMount `)
},
已安装(){
console . log(`-$ {组件名称} -已装载`)
},
更新之前(){
console . log(`-$ {组件名称} -更新前`)
},
已更新(){
console . log(`-$ {组件名称} -已更新`)
},
销毁前(){
console . log(`-$ {组件名称} -销毁前`)
},
销毁(){
console . log(`-$ {组件名称} - destroyed `)
},
组件：{
生命周期单一
}
}
初始化组件时，打印：
当子组件数据中的值发生变化时，打印：
当父组件数据中的值发生变化时，打印：
当道具改变时，打印：
当子组件被销毁时，打印：
当父组件被销毁时，打印：
从打印结果可以看出：
在安装子组件之前，不会安装父组件。
当子组件完成挂载时，父组件将主动执行一次beforeUpdate/updated钩子函数(仅第一次)。
父子组件在数据变更中单独监控，但是更新道具中的数据是有关联的(实用)。
销毁父组件时，请先销毁子组件，然后再销毁父组件。
4. 兄弟组件的生命周期
在上述基础上，复杂组件更改如下
模板
div class=复杂
H3复杂组件/h3
生命周期-单一组件名称= cihl D1 /生命周期-单一
生命周期-单个组件名称= child 2 /生命周期-单个
El-button @ click= datavar=1 复杂更新{{dataVar}}/el-button
El-button @ click=处理销毁复杂销毁/el-button
/div
/模板
初始化组件时，打印：
当child1被更新和销毁时，打印：
当child2被更新和销毁时，打印：
父组件销毁时打印。
从打印结果可以看出：
组件初始化(安装前)是单独进行的，安装是从上到下进行的。
当没有数据关联时，兄弟组件的更新和销毁是互不相关的。
5. 宏mixin的生命周期
在上述基础上，添加一个mixin.js文件，内容如下：
const COMPONENT _ NAME= lifecycleMixin
导出默认值{
名称：组件名称，
创建之前(){
console . log(`-$ {组件名称} -创建前`)
},
已创建(){
console . log(`-$ {组件名称} -已创建`)
},
beforeMount() {
console . log(`-$ {组件名称} - beforeMount `)
},
已安装(){
console . log(`-$ {组件名称} -已装载`)
},
更新之前(){
console . log(`-$ {组件名称} -更新前`)
},
已更新(){
console . log(`-$ {组件名称} -已更新`)
},
销毁前(){
console . log(`-$ {组件名称} -销毁前`)
},
销毁(){
console . log(`-$ {组件名称} - destroyed `)
}
}
类似地，复杂组件更改如下：
从导入lifecycleMixin。/混合
导出默认值{
米辛：[生命周期米辛]，
//.
}
组件初始化后，打印：
当组件被销毁时，打印：
从打印结果可以看出：
mixin中的生命周期只与引入的组件的生命周期有关，这里先实现mixin的生命周期。这篇关于Vue生命周期的文章就介绍到这里。希望对大家的学习有帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。