生命周期函数的使用

关于学习 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. e l r o o t m o u n t e d v m . el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm. el 也在文档内。

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

beforeUpdate

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

updated:

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

beforeDestroy

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

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

destroyed

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

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

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

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

updata在nextTick之前触发

猜你喜欢

转载自blog.csdn.net/wodegegeya/article/details/89874437
今日推荐