当前位置：首页 > news >正文

新手学做网站下载网页传奇大全

news 2025/10/11 0:13:43

新手学做网站下载,网页传奇大全,注册公司该怎么注册,在线域名注册重命名：beforeDestroy→beforeUnmount，destroyed→unmounted 新增：onServerPrefetch（SSR场景） Vue 生命周期钩子变化详解（Vue2 → Vue3） 一、核心钩子重命名与语义优化销毁阶段语义化升级 • …

重命名：beforeDestroy→beforeUnmount，destroyed→unmounted
新增：onServerPrefetch（SSR场景）

Vue 生命周期钩子变化详解（Vue2 → Vue3）

一、核心钩子重命名与语义优化

销毁阶段语义化升级
• Vue2 钩子：beforeDestroy（销毁前）→ Vue3 钩子：onBeforeUnmount（卸载前）

• Vue2 钩子：destroyed（销毁后）→ Vue3 钩子：onUnmounted（卸载后）

• 变化意义：从“销毁”到“卸载”的术语调整更准确描述组件从 DOM 中移除的过程。例如，onUnmounted 更明确表示组件已从 DOM 树中脱离，所有事件监听和子组件已被清理。
选项式 API 与组合式 API 的对应关系
• Options API：仍支持 Vue2 的钩子名称（如 beforeDestroy），但官方推荐使用新命名。

• Composition API：需显式引入函数式钩子（如 import { onBeforeUnmount } from 'vue'），并在 setup() 中注册。

二、新增生命周期钩子

onServerPrefetch（服务端渲染专用）
• 作用：在服务端渲染（SSR）时预取数据，确保组件在客户端注水（hydration）前完成异步操作。

• 使用场景：
```
import { onServerPrefetch } from 'vue';
export default {setup() {const data = ref(null);onServerPrefetch(async () => {data.value = await fetchData(); // 服务端预取数据});return { data };}
};
```
• 优势：解决 Vue2 中 SSR 数据获取逻辑分散的问题（如需在 created 和 mounted 中区分客户端与服务端逻辑）。
调试钩子（开发环境专用）
• onRenderTracked：追踪组件渲染依赖的响应式数据变动。

• onRenderTriggered：定位触发重新渲染的具体依赖变化。

• 示例：
```
onRenderTriggered((e) => {console.log('重新渲染由以下依赖触发：', e.target); // 输出触发更新的变量
});
```

三、其他关键变化

初始化阶段合并
• Vue2：beforeCreate（数据未初始化）和 created（数据已初始化）分两个阶段。

• Vue3：通过 setup() 函数统一替代，逻辑集中处理响应式数据和生命周期注册。
执行顺序调整
• Composition API 优先：setup() 中的钩子（如 onMounted）先于 Options API 的 mounted 执行。

• 父子组件顺序：保持“父 beforeMount → 子完整挂载 → 父 mounted”的流程，确保子组件优先就绪。
缓存组件钩子
• 新增：onActivated（组件激活）和 onDeactivated（组件失活），用于 <keep-alive> 缓存的组件状态管理。

• 示例：
```
onActivated(() => {console.log('组件从缓存恢复，重新连接 WebSocket');
});
```

四、迁移与最佳实践

升级建议
• 替换销毁钩子：全局替换 beforeDestroy → onBeforeUnmount，destroyed → onUnmounted。

• SSR 优化：将服务端数据预取逻辑迁移至 onServerPrefetch，避免客户端重复请求。

• 组合式优先：在 setup() 中使用函数式钩子，提升代码组织性和 Tree-shaking 优化效果。
常见误区
• 避免在 updated 中修改数据：可能引发无限循环更新，应改用 watch 或 nextTick。

• 卸载阶段资源释放：在 onBeforeUnmount 中清理定时器、事件监听和第三方库实例。