Vue 的生命周期 | 青训营笔记

98 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第3天

Vue 一共有8个生命阶段,分别是创建前、创建后、加载前、加载后、更新前、更新后、销毁前和销毁后,每个阶段对应了一个生命周期的钩子函数。

创建阶段 (1)beforeCreate 初始化事件和生命周期,在实例初始化之后,在数据监听和事件配置之前触发。因此在这个事件中我们是获取不到 data 数据的。

(2)created 钩子函数,在实例创建完成后触发,此时可以访问 data、methods 等属性。但这个时候组件还没有被挂载到页面中去,所以这个时候访问不到 $el 属性。一般我们可以在这个函数中进行一些页面初始化的工作,比如通过 ajax 请求数据来对页面进行初始化。

(3)beforeMount 钩子函数,在组件被挂载到页面之前触发。在 beforeMount 之前,会找到对应的 template,并编译成 render 函数。

render会生成虚拟 DOM, 挂载到真实 DOM, 挂在完成后就到了 mounted

(4)mounted 钩子函数,在组件挂载到页面之后触发。此时可以通过 DOM API 获取到页面中的 DOM 元素。可以进行异步请求, 操作 DOM, 定时器. 用 this.$nexttick 把操作 DOM 放到回调中

更新阶段, 被多次执行 (5)beforeUpdate 钩子函数,在响应式数据更新时触发,发生在虚拟 DOM 重新渲染和打补丁之前,这个时候我们可以对可能会被移除的元素做一些操作,比如移除事件监听器。

render,生成虚拟 DOM render 可以用来存储临时变量, 因为 computed 只能计算响应式数据, 而我们可能用到很多全局数据 (6)updated 钩子函数,虚拟 DOM 重新渲染和打补丁之后调用。

在这两个阶段不能更改依赖数据, 不然会死循环, 执行更新知道浏览器爆掉

销毁阶段

(7)beforeDestroy 钩子函数,在实例销毁之前调用。一般在这一步我们可以销毁定时器、解绑全局事件等。(如果用定时器不 clear, 会造成内存泄漏)

(8)destroyed 钩子函数,在实例销毁之后调用,调用后,Vue 实例中的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

当我们使用 keep-alive 的时候,还有两个钩子函数,分别是 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 actived 钩子函数。