新手网站建设,泰州免费网站建站模板,wordpress 链接重定向,网页设计需要学什么好Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子#xff08;Lifecycle Hooks#xff09;#xff0c;让开发者可以在不同阶段执行逻辑。
1. Vue 2 生命周期完整流程
生命周期的四个主要阶段
创建阶段#xff08;Creation#xff09;挂载阶段#…Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子Lifecycle Hooks让开发者可以在不同阶段执行逻辑。
1. Vue 2 生命周期完整流程
生命周期的四个主要阶段
创建阶段Creation挂载阶段Mounting更新阶段Updating销毁阶段Destruction 2. Vue 2 生命周期钩子Hooks
阶段生命周期钩子作用创建前beforeCreate组件刚创建还没有 data、methods、computed 等创建后createddata、methods 已初始化但 DOM 还未渲染挂载前beforeMounttemplate 解析完毕还未挂载到真实 DOM 上挂载后mounted组件挂载到 DOM可以操作 DOM更新前beforeUpdatedata 变化DOM 还未更新更新后updateddata 变化DOM 已更新销毁前beforeDestroy组件即将销毁可清理定时器、解绑事件销毁后destroyed组件已销毁所有子组件也被销毁
3. Vue 2 生命周期示例
templatedivh1{{ message }}/h1button clickchangeMessage修改消息/button/div
/templatescript
export default {data() {return {message: Hello Vue!};},methods: {changeMessage() {this.message Vue 生命周期演示;}},beforeCreate() {console.log(1. beforeCreate - data 还未初始化, this.message); // undefined},created() {console.log(2. created - data 初始化完成, this.message);},beforeMount() {console.log(3. beforeMount - 模板编译完成尚未挂载);},mounted() {console.log(4. mounted - 组件已挂载到 DOM可进行 DOM 操作);},beforeUpdate() {console.log(5. beforeUpdate - data 变化DOM 还未更新, this.message);},updated() {console.log(6. updated - data 变化DOM 已更新, this.message);},beforeDestroy() {console.log(7. beforeDestroy - 组件即将销毁可清理定时器等);},destroyed() {console.log(8. destroyed - 组件已销毁);}
};
/script4. Vue 3 生命周期
Vue 3 依然有生命周期钩子但使用 setup() 时需要使用 Vue 3 提供的 onXxx 形式的钩子从 vue 引入。
Vue 3 生命周期对比
Vue 2Vue 3 (Composition API)beforeCreatesetup() 直接初始化createdsetup() 直接初始化beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestroyonBeforeUnmountdestroyedonUnmounted
Vue 3 生命周期示例
templatedivh1{{ message }}/h1button clickchangeMessage修改消息/button/div
/templatescript
import { ref, onMounted, onBeforeUnmount, onUpdated } from vue;export default {setup() {const message ref(Hello Vue 3!);const changeMessage () {message.value Vue 3 生命周期演示;};onMounted(() {console.log(组件已挂载);});onUpdated(() {console.log(组件更新了);});onBeforeUnmount(() {console.log(组件即将销毁);});return { message, changeMessage };}
};
/script5. 生命周期使用场景
钩子适用场景beforeCreate组件初始化前可用于 console.log 调试created获取 data初始化 Vuex发起 Ajax 请求beforeMount在 DOM 渲染前执行一些逻辑mounted获取 DOM初始化 第三方库如 EChartsbeforeUpdatedata 变化时执行一些更新前的计算updatedDOM 更新后执行操作如日志记录beforeDestroy清除 setInterval、解绑 window 事件destroyed组件销毁后的清理操作
6. Vue 生命周期面试题
Q1: created 和 mounted 有什么区别
钩子执行时机适用场景created组件实例创建完成但 DOM 还未渲染可用于获取 data、调用 Vuexmounted组件挂载到 DOM 后适用于 DOM 操作如 ECharts 如果要操作 DOM需要在 mounted 中进行。
Q2: beforeDestroy 用来做什么
beforeDestroy 适用于
清除定时器解绑全局事件销毁第三方库
beforeDestroy() {clearInterval(this.timer); // 清除定时器window.removeEventListener(resize, this.handleResize); // 解绑事件
}
