Vue 的生命周期钩子允许你在不同阶段的组件生命周期执行代码。下面我们将分别介绍 Vue 2 和 Vue 3 中的生命周期钩子，并提供相应的使用示例。
Vue 2 生命周期钩子
1. beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
new Vue({
beforeCreate() {
console.log('beforeCreate');
}
});
2. created
在实例创建完成后被立即调用。
new Vue({
data: {
message: 'Hello Vue!'
},
created() {
console.log('created', this.message);
}
});
3. beforeMount
在 mount 方法执行之前被调用。
new Vue({
template: '<div>{{ message }}</div>',
data: {
message: 'Hello Vue!'
},
beforeMount() {
console.log('beforeMount');
}
});
4. mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
new Vue({
template: '<div>{{ message }}</div>',
data: {
message: 'Hello Vue!'
},
mounted() {
console.log('mounted');
}
});
5. beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
new Vue({
template: '<div>{{ message }}</div>',
data: {
message: 'Hello Vue!'
},
beforeUpdate() {
console.log('beforeUpdate');
}
});
6. updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
new Vue({
template: '<div>{{ message }}</div>',
data: {
message: 'Hello Vue!'
},
updated() {
console.log('updated');
}
});
7. beforeDestroy
实例销毁之前调用。
new Vue({
beforeDestroy() {
console.log('beforeDestroy');
}
});
8. destroyed
Vue 实例销毁后调用。
new Vue({
destroyed() {
console.log('destroyed');
}
});
Vue 3 生命周期钩子
在 Vue 3 中，生命周期钩子有所变化，特别是在使用 setup 函数时。以下是一些常用的生命周期钩子：
1. onBeforeMount
在挂载开始之前被调用。
import { onBeforeMount } from 'vue';
export default {
setup() {
onBeforeMount(() => {
console.log('onBeforeMount');
});
}
};
2. onMounted
在挂载完成后被调用。
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('onMounted');
});
}
};
3. onBeforeUpdate
在更新之前被调用。
import { onBeforeUpdate } from 'vue';
export default {
setup() {
onBeforeUpdate(() => {
console.log('onBeforeUpdate');
});
}
};
4. onUpdated
在更新完成后被调用。
import { onUpdated } from 'vue';
export default {
setup() {
onUpdated(() => {
console.log('onUpdated');
});
}
};
5. onBeforeUnmount
在卸载之前被调用。
import { onBeforeUnmount } from 'vue';
export default {
setup() {
onBeforeUnmount(() => {
console.log('onBeforeUnmount');
});
}
};
6. onUnmounted
在卸载完成后被调用。
import { onUnmounted } from 'vue';
export default {
setup() {
onUnmounted(() => {
console.log('onUnmounted');
});
}
};
希望这份文档能够帮助你更好地理解和使用 Vue 2 和 Vue 3 的生命周期钩子！
