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

生命周期钩子函数

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

Logo

前往低代码交流专区

更多推荐