目录
前言:
正文:
总结:
前言:
Vue.js 3是Vue.js框架的最新主要版本,引入了一些重大的改变和增强。在Vue 3中,由于Composition API的引入,生命周期钩子被替换为生命周期函数。
正文:
以下是Vue 3中的生命周期函数以及它们的用法:
- setup:
setup
函数是组件中的入口点,在组件实例化之前执行。
在 setup
中,可以进行组件的初始化工作,包括数据的设置、计算属性的定义以及对响应式变量的设置等。
通过 setup
函数返回一个对象,其中包含组件需要暴露的属性、方法等。
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
return {
count
};
}
};
- beforeCreate / created:
在Vue 3中,beforeCreate
和 created
生命周期钩子被替换为 setup
函数。
在 setup
函数中进行数据的初始化和其他操作,相当于 beforeCreate
和 created
钩子的功能。
- beforeMount / onBeforeMount:
beforeMount
生命周期钩子被替换为 onBeforeMount
生命钩子函数。
在组件挂载到DOM之前执行。
- mounted / onMounted:
mounted
生命周期钩子被替换为 onMounted
生命钩子函数。
在组件挂载到DOM后执行。
- beforeUpdate / onBeforeUpdate:
beforeUpdate
生命周期钩子被替换为 onBeforeUpdate
生命钩子函数。
在数据更新之前执行。
- updated / onUpdated:
updated
生命周期钩子被替换为 onUpdated
生命钩子函数。
在数据更新之后执行。
- beforeUnmount / onBeforeUnmount:
beforeUnmount
生命周期钩子被替换为 onBeforeUnmount
生命钩子函数。
在组件销毁之前执行。
- unmounted / onUnmounted:
unmounted
生命周期钩子被替换为 onUnmounted
生命钩子函数。
在组件销毁之后执行。
总结:
这些生命周期函数可以在 setup
函数中直接使用,也可以在组件选项对象中定义。请注意,Vue 3中生命周期函数的名称已经发生了变化,并且使用Composition API时,大部分生命周期函数被替换为相应的生命周期钩子函数。