前言:
该文章是自己在学习vue过程中自己的一点总结,完全按照自己的理解,有些地方术语不正确,理解有错的,欢迎指正。
vue官方 生命周期钩子: https://cn.vuejs.org/v2/api/#beforeCreate
-
beforeCreate(){}
在对象还没有创建之前就可以调用该方法,还不能通过this获得属性里的东西(如: data)
在此钩子中可以进行一些加载相关的东西,如加载动画(loading加载可以在created函数中结束)
-
created(){}
此时可以使用this.data,但是dom还没有生成,所以在该钩子中经常去进行一些初始化所需数据的请求
-
beforeMount(){}
挂载之前调用,render函数首次被调用,开始进行渲染。
-
mounted(){}
要把<templete>里的内容往el里放, 该函数执行结束后,页面基本就显示出来了
-
beforeUpdate(){}
组件更新之前
-
updated(){}
组件更新之后
这两个函数均在页面数据发生变化时调用(因用户交互带来的数据变化)
传入的值变化不会调用(即不能用来根据传值不同显示不同内容)
-
activated
-
deactivated
被<keep-alive>包裹的组件激活和停用时调用
activated(){}
// 在keep-alive组件被激活时调用,即调用该组件时
deactivated(){}
// 在keep-alive组件被停用时被调用
如图:
在测试中,当打开一个被<keep-alive></keep-alive>包裹的页面时,该组件被调用,调用activated生命周期函数,页面内数据得到更新,当关闭该页面时调用deactivated生命周期函数。
-
beforeDestroy(){}
实例销毁之前调用。在这一步,实例仍然完全可用。
-
destroyed(){}
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
-
errorCaptured(){}
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false
以阻止该错误继续向上传播。
>你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要,它可以防止当一个错误被捕>获时该组件进入一个无限的渲染循环。
总结:
- 在被创建时, 以上生命周期函数从上到下依此执行
- 只有beforeUpdate/updated, activated/deactivated在相应情况下可以被重复调用,其他函数在一个生命周期只执行一次
- 所有的生命周期钩子自动绑定
this
上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如created: () => this.fetchTodos()
)。这是因为箭头函数绑定了父上下文,因此this
与你期待的 Vue 实例不同,this.fetchTodos
的行为未定义。