5. Vue.js 生命周期
从Vue
实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期。
Vue
实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue
的生命周期。
生命周期钩子 = 生命周期函数 = 生命周期事件。
生命周期中里有一个很重要的概念: 钩子函数, 其实就是Vue
提前定义好的事件, 其作用类似于Servlet
的init
方法和distory
方法
5.1 创建期间生命周期函数
-
beforeCreate
:实例刚在内存中被创建出来,此时,还没有初始化好data
和methods
属性 ( 我感觉这个时候没什么可以去改变的了 ) -
created
:实例已经在内存中创建OK,此时data
和methods
已经创建,此时还没有开始 编译模板。我们可以在这里进行Ajax
请求。 -
beforeMount
:此时已经完成了模板的编译,但是还没有挂载到页面中 -
mounted
:此时,已经将编译好的模板,挂载到了页面指定的容器中显示。(mounted
之后,表示真实DOM渲染完了,可以操作DOM
了)
5.2 运行期间生命周期函数
-
beforeUpdate
:状态更新之前执行此函数, 此时data
中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM
节点 -
updated
:实例更新完毕之后调用此函数,此时data
中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了。
PS:数据发生变化时,会触发这两个方法。不过,我们一般用watch
来做。
5.3 销毁期间生命周期函数
-
beforeDestroy
:实例销毁之前调用。在这一步,实例仍然完全可用。 -
destroyed:Vue
实例销毁后调用。调用后,Vue
实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
PS:可以在beforeDestroy
里清除定时器、或清除事件绑定。
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
DOM 渲染在 mounted
中就已经完成了。
生命周期钩子的一些使用方法:
-
beforecreate
: 可以在此阶段加loading
事件,在加载实例时触发; -
created
: 初始化完成时的事件写在这里,如在这结束loading
事件,异步请求也适宜在这里调用; -
mounted
: 挂载元素,获取到DOM
节点; -
updated
: 如果对数据统一处理,在这里写上相应函数; -
beforeDestroy
: 可以做一个确认停止事件的确认框;
vue3 生命周期全都写在
setup
中改变:
beforeDestroy 改名为 beforeUnmount
destroyed 改名为 unmounted
beforeCreate => setup
created => setup
beforeMount => onBeforeMount
mounted => onMounted
beforeUpdate => onBeforeUpdate
updated => onUpdated
beforeUnmount => onBeforeUnmount
unmounted => onUnmounted
setup() {
onMounted(() => {
console.log('mounted')
})
}