如何更好理解Vue.js生命周期？各钩子在页面加载阶段的时机

I totally get where you're coming from—Vue's official docs can feel a bit sparse when you're just starting out with lifecycle hooks, like they assume you already know the ins and outs. Sticking with created() for initializations works, but each hook has a unique purpose that can make your code cleaner and more efficient. Let's break down the key hooks you asked about, including their exact timing during page loading and practical use cases.

Core Hooks: When to Use Them & Loading Stage Timing #

created() #

• Practical use cases: This is the earliest point where you can access your component's reactive data and methods, but the DOM hasn't been rendered yet. Perfect for:
  • Initializing reactive data properties (e.g., setting default values for a form)
  • Firing async API requests (just note that if the request resolves before the DOM mounts, you'll still need to wait for mounted() if you're updating DOM-dependent stuff)
  • Setting up non-DOM event listeners (e.g., subscribing to Vuex store changes, or listening to custom Vue events)
• Loading stage timing: Triggers during the page loading in progress phase. The component instance exists, but its DOM elements haven't been added to the page yet—users won't see your component's content at this point.

mounted() #

• Practical use cases: The DOM is fully rendered and attached to the page here, so this is your go-to for DOM-related work:
  • Initializing third-party UI libraries (e.g., ECharts, Swiper, or date pickers that need a DOM node to attach to)
  • Reading or modifying DOM elements (e.g., getting the height of a container, or setting focus on an input)
  • Adding DOM event listeners (e.g., scroll, resize events that require the element to exist)
• Loading stage timing: Triggers once the page loading is complete. Your component's content is visible to users, and the core initial render process is done.

updated() #

• Practical use cases: This fires after any reactive data change causes the DOM to re-render. Use it for:
  • Syncing DOM changes after data updates (e.g., re-calculating a container's height when a list of items grows/shrinks)
  • Updating third-party libraries that depend on reactive data (e.g., re-rendering a chart when its dataset changes)

  Important: Never modify reactive data directly in updated()—this will trigger another re-render, creating an infinite loop!

• Loading stage timing: Doesn't fire during the initial page load (the initial DOM render is handled by mounted()). Only triggers after the page has loaded, when users interact with your app and change reactive data.

destroyed() #

• Practical use cases: This fires after the component has been fully destroyed and removed from the DOM. It's all about cleanup to avoid memory leaks:
  • Clearing timers or intervals (e.g., a setInterval you used for a countdown)
  • Canceling pending API requests (to prevent unnecessary network traffic and state updates)
  • Removing event listeners you added in mounted() (e.g., unsubscribing from scroll events)
  • Unsubscribing from Vuex store or event bus listeners
• Loading stage timing: Has no relation to the initial page load. Only triggers when the component is destroyed (e.g., when navigating to a different route, or when a v-if condition hides the component).

Quick Page Loading Flow Cheat Sheet #

To wrap it up, here's how these hooks fit into the initial page load:

• Loading in progress: Component instance is created → created() runs (data ready, DOM not ready)
• Loading complete: Component DOM is mounted to the page → mounted() runs (DOM ready, content visible)

内容的提问来源于stack exchange，提问作者hidar