vue生命周期中，钩子函数执行顺序

1. 流程图

2.一般的执行顺序（从上往下）：

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

vue生命周期中，钩子函数执行顺序相关推荐

vue学习之生命周期，钩子函数执行顺序
vue的生命周期,钩子函授执行顺序一般的执行顺序(从上往下): beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用 ...
实战 Vue 之生命周期钩子函数执行顺序
实战 Vue 之生命周期钩子函数执行顺序生命周期钩子函数父组件与子组件执行顺序生命周期钩子函数 beforeCreate:实例刚被创建出来,data 数据和 methods 方法还未被初始化,不 ...
Vue生命周期中对mounted、beforeUpdate、updated的理解
Vue生命周期中对mounted.beforeUpdate.updated的理解前言 mounted.beforeUpdate.updated 前言以下文章纯为个人理解,如有错误,请求评论区指正呀 ...
Vue生命周期中的created和mounted的区别
之前大部分时候都是用angular开发项目,vue写的很少,最近有必要把vue和webpack重新整理一下了.下面我们先看一下Vue生命周期中的created和mounted的区别. 我们先看一张图( ...
Vue生命周期中mounted、created、methods、computed、watched等的区别
1.Vue生命周期中mounted和created的区别 https://blog.csdn.net/xdnloveme/article/details/78035065. 2.[Vue] 生命周期, ...
Vue生命周期中钩子函数理解简记
Vue生命周期钩子函数钩子函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroy ...
初探 Vue 生命周期和钩子函数
生命周期生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数. 简单来说就是好像把人的出生到死亡分成一个个阶段,你取名字肯定是在你出生阶段,而不是在成年阶段:你结婚肯定是在成年阶段,而不是在 ...
vue createApp()，mount()，生命周期钩子函数执行顺序
之前一直以为在调用createApp()时执行beforeCreate.created这两个钩子函数,在mount()时才执行beforeMount.mounted这两个钩子函数但实际上,在crea ...
Vue生命周期和钩子函数的一些理解
vue生命周期简介咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...

vue生命周期中，钩子函数执行顺序

vue生命周期中，钩子函数执行顺序相关推荐

最新文章

热门文章