
1、create
beforeCreate:el 和 data 并未初始化,在当前函数里面是访问不到data中的属性,但是可以通过vue的实例对象进行访问
created: 完成了 data 数据的初始化,在当前函数中我们可以访问到data中的属性,当前生命周期函数执行的时候会将data中所以的属性和methods身上所以的方法添加到vue的实例身上,同时会将data中所有的属性添加一个getter/setter方法
2、mount
beforeMount:挂载前,render函数初次被调用,数据和模板没有进行相结合,同时还没有渲染到html页面上,可以在此做渲染前data中数据最后的修改
mounted:完成挂载,数据和模板进行相结合,渲染成真实的DOM结构,在当前生命周期函数里面我们可以访问到真实的DOM结构。
3、update
beforeUpdate:只要data中的属性发生了改变,那么这个生命周期就会执行,render函数再次会执行。
updated:更新后,在当前生命周期函数中我们可以访问到最新的DOM结构(数据更新后最新的DOM结构)和数据。
4、destroy
beforeDestroy:销毁之前还可以访问到DOM结构 以及相关的数据(data),在这个生命周期函数中我们可以将绑定的事件进行移除
destroyed:在这个生命周期函数中会将数据和模板之间的关系会断开,在这个生命周期函数中我们还是可以访问到data中的属性,但是访问不到真实的DOM结构了
5、active (当keep-alive 缓存组件才会有的生命周期的钩子函数)
actived: 当缓存组件有被显示出来时
deactivated: 当缓存的组件隐藏时,会触发这个钩子函数
errorCaptured:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串

网友评论