Vue3 生命周期详解
Vue3 生命周期
Vue3 中的生命周期函数可以帮助我们在组件不同阶段执行不同的操作。下面是 Vue3 中的生命周期函数以及它们的使用方法和代码解析。
beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
用途
通常在这个阶段可以用来进行一些初始的数据操作，比如对 data 中的数据进行修改。
代码解析
setup(props, context) {
console.log('beforeCreate')
return {}
}
created
实例创建完成后被立即调用。
用途
通常在这个阶段可以用来进行一些数据的异步请求操作，比如请求后端接口获取数据。
代码解析
setup(props, context) {
console.log('created')
onMounted(() => {
console.log('mounted')
})
return {}
}
beforeMount
在挂载开始之前被调用。
用途
通常在这个阶段可以用来进行一些 DOM 操作，比如获取 DOM 元素进行一些操作。
代码解析
setup(props, context) {
console.log('beforeMount')
onMounted(() => {
console.log('mounted')
})
return {}
}
mounted
实例挂载之后被调用。
用途
通常在这个阶段可以用来进行一些 DOM 操作，比如使用 jQuery 对 DOM 元素进行一些操作。
代码解析
setup(props, context) {
console.log('mounted')
return {}
}
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
用途
通常在这个阶段可以用来进行一些数据更新之前的操作，比如获取新的数据并进行一些操作。
代码解析
setup(props, context) {
console.log('beforeUpdate')
onMounted(() => {
setInterval(() => {
this.message = new Date().toLocaleTimeString()
}, 1000)
})
return {
message: 'Hello World'
}
}
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
用途
通常在这个阶段可以用来进行一些数据更新之后的操作，比如获取更新后的 DOM 元素进行一些操作。
代码解析
setup(props, context) {
console.log('updated')
onMounted(() => {
setInterval(() => {
this.message = new Date().toLocaleTimeString()
}, 1000)
})
return {
message: 'Hello World'
}
}
beforeUnmount
实例销毁之前调用。
用途
通常在这个阶段可以用来进行一些清理操作，比如清除定时器。
代码解析
setup(props, context) {
console.log('beforeUnmount')
onMounted(() => {
setInterval(() => {
this.message = new Date().toLocaleTimeString()
}, 1000)
})
onBeforeUnmount(() => {
clearInterval(intervalId)
})
return {
message: 'Hello World'
}
}
unmounted
实例销毁后调用。
用途
通常在这个阶段可以用来进行一些清理操作，比如释放内存。
代码解析
setup(props, context) {
console.log('unmounted')
onMounted(() => {
setInterval(() => {
this.message = new Date().toLocaleTimeString()
}, 1000)
})
onBeforeUnmount(() => {
clearInterval(intervalId)
})
return {
message: 'Hello World'
}
}