关于生命周期钩子函数的哪些事

关于学习 Vue 的生命周期钩子函数

我们需要详细的了解,这会在写代码的时候,达到事半功倍的效果,可以帮我们很快的找出错误和解决需要,详情请见vue的这个章节

在Vue的官方文档中,给出了生命周期图示

生命周期图示

我们可以看到,这个图描述的Vue的生命周期从创建实例到销毁的过程
下面我们详细的说说Vue中有哪些什么周期钩子函数

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

beforeCreate:

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

created:

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

• 可以拿到数据
• 可以调用实例和方法
• 在这个生命周期钩子函数中适宜做异步请求

beforeMount:

在挂载开始之前被调用：相关的 render 函数首次被调用。
也就是说DOM还未被渲染

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

mounted:

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

DOM已经被渲染,初始数据DOM渲染完毕,可以获取DOM

beforeUpdate

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

updated:

数据更新完毕,如果对数据做统一的处理,在updated中处理
,如果想分别区分不同的数据更新,同时对DOM操作,用nextTick

beforeDestroy

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

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

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

watch:对具体某个函数变化作统一处理

nextTick:处理某个数据的某一次变化

created:可以获取数据,调用一部数据,调用方法

updata在nextTick之前触发