Vue生命周期
生命周期概念
官方解释
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
简单理解
简单来说就是Vue实例被创建时会经过很多步骤，比如beforeCreate(创建前)，created(完成创建)，beforeMount(挂载前)，mounted(完成挂载)…
在这些特殊时期，Vue提供了一些名为生命周期钩子的函数，也就是这些函数会在这些时期执行。你可以在这些函数中添加自己的代码。
示例代码
<html>
<body>
<div id="root">
<h1 :style="{opacity}">欢迎使用VUE</h1>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
opacity:1
},
//当网页元素全部挂在完成时执行mount()中的代码
mounted():{
setInterval(()=>{
this.opacity -=0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
})
</script>
</html>
深入生命周期
名词解释
挂载阶段
Init Events & Lifecycle：初始化：生命周期、事件，但数据处理还没开始。
beforeCreate：这时无法通过vm访问到data中的数据、methods中的方法。
Init injections & reactivity：初始化：数据监测、数据代理。
created：这时可以通过vm访问到data中的数据、methods中配置的方法。
：此阶段Vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容。
beforeMount：这时页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作最终都不奏效。
Create vm.$el and replace “el” with it：将内存中的虚拟DOM转为真实DOM插入页面。
mounted：页面中呈现的是经过Vue编译的DOM，对DOM操作有效（尽可能避免）。至此初始化过程结束，一般在此进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作。
更新阶段
beforeUpdate：数据发生了更新，此时数据是新的，但是页面是旧的，即：页面尚未和数据保持同步。
Virtual DOM re-render and patch：根据新数据，生成新的虚拟 DOM，随后与旧的虚拟 DOM 进行比较，最终完成页面更新，即：完成了 Model->View 的更新。
updated：此时数据是新的，页面也是新的，即：页面和数据保持同步。
销毁流程
beforeDestroy：vm中所有的：data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。
Teardow watchers,child components and event listeners：拆除监视者，孩子组件和事件监听者。
destroyed：销毁完成。
重要的钩子
-
mounted()
常在此钩子中进行发送 ajax 请求，启动定时器，绑定自定义事件，订阅消息等操作。
-
beforeDestroy()
常在此钩子中进行清除定时器，解绑自定义事件，取消订阅消息等操作。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
