请详细说下你对vue生命周期的理解,vue生命周期分别做了什么
本文主要详细介绍了Vue的生命周期。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.生命周期(重要)1.1初步了解生命周期1.2生命周期流程(8) 1.3详细的生命周期流程图1.4常见的生命周期挂钩：1.4.1关于销毁1.4.2父子组件的生命周期1.5小案例1.6代码示例生命周期挂钩总结
1. 生命周期（重要）
1.1 初步认识生命周期
别名：生命周期回调函数、生命周期函数、生命周期钩子。生命周期是什么？Vue在关键时刻为我们呼唤的一些有特殊名字的函数。生命周期函数的名字不能改，但是函数里面的具体内容是程序员自己写的。这在生命周期函数中指向vm或组件实例对象。
1.2 生命周期流程（8个）
1.初始化
1 .创建之前()
2 .已创建()
2.挂载（页面渲染）
1.beforeMount()
2 .已安装()
3.更新
1 .更新之前()
2 .更新()
4.销毁
1.beforeDestory()
2 .销毁()
1.3 生命周期详细流程图
1.4 常用的生命周期钩子：
Before():可以配置全局事件总线，后面会提到。
Mounted():可以在这个阶段发送ajax请求，启动定时器、绑定自定义事件、订阅消息等异步任务【初始化操作】。
BeforeDestroy():做这个阶段的收尾工作，比如清空定时器，解除自定义事件的绑定，取消消息订阅等。[头尾工作]
1.4.1 关于销毁
销毁后，借助Vue开发者工具，看不到任何信息。销毁后，自定义事件将无效，但本机DOM事件仍然有效。一般销毁前不会操作数据，因为即使操作了数据也不会再次触发更新过程。
1.4.2 关于父子组件的生命周期
1.加载渲染的过程
parent before create==parent created==parent before mount==child before create==child before mount==child mounted==parent mounted
2.更新的过程
父更新前==子更新前==子更新后==父更新后
3.销毁过程
父销毁前==子销毁前==子销毁前==父销毁
1.5小案例
div id=root
！-让h3透明有过渡效果-
H3 :style={opacity:opacity} 欢迎学习Vue！/h3
按钮@ Click= des Click I destroy/button
/div
脚本
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{
不透明度：1
},
方法：{
des(){
//触发此函数必须调用，beforeDestroy()，destroyed()
这个。$destroy()
}
},
Mounted() {//挂载
/*
-在模板解析完成并且初始的真实DOM元素被装载到页面上之后执行的函数。
它只会被执行一次。
-这指向Vue。
-开发中的常用方法。当我们想读取一个属性但不能时，我们可以
将此属性绑定到可以一起访问的元素，例如下面的timer示例。
*/
this.timer=setInterval(()={
这.不透明度-=0.01
if (this.opacity=0)
this.opacity=1
}, 10);
},
销毁前(){
console . log( before destroy-清除计时器)；
clearInterval(this.timer)
},
销毁(){
console . log( destroyed-destroyed )
},
})
/脚本
1.6 代码举例说明生命周期钩子
div id=root
h3的值为：{{n}}/h3
button @ Click= add Click me n 1/button
Button @click=remove 单击以销毁虚拟机/button
/div
脚本
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{
n:1
},
方法：{
add(){
这个
},
移除(){
这个。$destroy()
}
},
创建之前(){
/*
这时，初始化生命周期、事件等。还没有开始。
vm不能访问数据中的数据，方法中的方法。
*/
console . log( before create )；
//console . log(this . n)；//未定义
//console . log(this . add())；//this.add不是函数
//调试器
},
已创建(){
/*
初始化的数据监控和数据代理已经完成。
虚拟机访问数据的方法和数据中的方法
*/
console . log( created )；
//console . log(this . n)；//1
//console . log(this . add())；//未定义
//调试器
},
beforeMount() {
/*
在安装之前，在图中的判断框中执行，这个阶段是Vue。
在解析模板、生成虚拟DOM并将其存储在内存中之后，页面不能
看看解析后是什么样子
*/
console . log( before mount )；
//调试器
},
已安装(){
/*
在模板被解析并且原始的真实DOM元素被装载到页面上之后执行的函数。
通常，启动一些定时器，发送网络请求，订阅消息，
自定义事件等等。
*/
console.log(mounted )。
//调试器
},
更新之前(){
/*
当数据被更新时，数据已经被更新，但是页面
还是没更新。
面试问的就是这个：还没跟数据同步的页面和舞台。
*/
console.log(beforeUpdate )。
},
已更新(){
/*
在此之前，新的虚拟DOM将与旧的进行比较，最后更新页面。
这个阶段是为了保持页面和数据同步。
*/
console.log(“已更新”)；
},
销毁前(){
/*
当我们调用vm时。$destroy，将执行以下两个函数，
为了立即执行销毁阶段，通常在这一阶段进行一些收尾工作。
例如，关闭计时器、取消订阅和取消绑定自定义事件。
*/
console . log(“before destroy”)；
},
销毁(){
/*
所有的指令、所有的定制事件监听器都不见了(只剩下本地dom的事件)
*/
console . log( destroyed )；
},
})
/脚本
总结
这就是我们今天要讲的内容。本文介绍了生命周期的相关知识，希望对你有帮助！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。