前端设计

实战 Vue 之生命周期钩子函数执行顺序

2024-01-19

生命周期钩子函数

beforeCreate:实例刚被创建出来,data 数据和 methods 方法还未被初始化,不能访问。用于初始化变量。

created:可以访问 data 数据和 methods 方法,不能访问 DOM 节点。用于 ajax 和页面初始化。

beforeMount:虚拟 DOM 已经创建,但是还未挂载到真实节点,可以在挂载之前更改数据。

mounted:可以访问 DOM 节点。

beforeUpdate:状态更新之前执行,页面还未渲染。

updated:页面渲染更新完成。

beforeDestroy:实例摧毁前调用,这时还可以使用实例。

destroyed:实例摧毁后调用。

activated:该钩子在服务器端渲染期间不被调用,在 DOM 节点挂载后和数据更新前调用。运用了组件缓存时,如果想每次切换都发送一次请求的话,需要把请求函数写在activated中,如果写在 created 或 mounted 中就只会在首次加载该组件时调用。

deactivated:keep-alive组件停用时调用。


其中 activated 和 deactivated 是 独有的钩子函数。也就是只有使用了 keep-alive 组件后才会有。 包裹的动态组件会被缓存,它是一个抽象组件,它自身不会渲染一个dom元素,也不会出现在父组件链中。当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。


当使用了 ,页面初始化时,生命周期的执行顺序为 created -> mounted -> activated,退出或关闭页面时触发 deactivated。当再次进入(前进或者后退)时,只触发 activated。


只执行一次的事件放在 mounted 中;每次进入页面都要执行的事件放在 activated 中。


父组件与子组件执行顺序

渲染过程

子组件挂载完成后,父组件才挂载,所以挂载顺序是:

父组件 beforeCreate -> 父组件 created -> 父组件 beforeMount -> 子组件 beforeCreate -> 子组件 created -> 子组件 beforeMount -> 子组件 mounted -> 父组件 mounted


子组件更新过程

影响到父组件的顺序为:

父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated


不影响到父组件的顺序为:

子组件 beforeUpdate -> 子组件 updated


父组件更新过程

影响到子组件的顺序为:

父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated


不影响到子组件的顺序为:

父组件 beforeUpdate -> 父组件 updated


销毁过程

父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed