VueJS：内部访问export default与全局常量应用实例的区别

Great question! Let's break down the core differences between using a component's internal this (from export default components) and accessing data via a globally defined root instance like your const app = new Vue(...):

1. Component Scope & Reusability #

• Global instance (app): This is a singleton—there’s only one instance for your entire root Vue app. Any access to app.requests or app.doSomething() will modify or reference the exact same data/methods across your entire application. If you try to reuse components that rely on this global instance, all instances will share the same state, leading to unexpected cross-component interference.
• Component this: Each component instance created from your export default definition gets its own isolated state. this.requests in one component instance is completely separate from this.requests in another instance of the same component. This is fundamental to Vue’s component-based architecture, making components reusable and self-contained.

2. Context & Lifecycle Alignment #

• Global instance: While your example works in the root instance’s created hook (since this === app here), relying on the global instance breaks down in nested components or asynchronous operations. For example, if you try to access app.requests in a child component’s mounted hook, you’re assuming the global instance is fully initialized and available—this creates fragile dependencies that can break if the global instance’s lifecycle changes.
• Component this: this is dynamically bound to the current component instance, so it always aligns with the component’s lifecycle. In hooks like created or mounted, this guarantees access to the component’s own data, methods, and computed properties at the correct stage of the lifecycle. This is the intended way to interact with a component’s internal state.

3. Code Maintainability & Coupling #

• Global instance: Using a global variable like app creates tight coupling between components and the root instance. If you ever rename the global variable, refactor the root app structure, or move components to another project, every reference to app.xxx will need to be updated. This also makes code harder to debug, as state changes can come from anywhere in the app.
• Component this: Following Vue’s conventions with this keeps code modular and self-documenting. Other developers reading your code will immediately understand that this.requests refers to the current component’s internal state, making the code easier to maintain and extend.

4. Nested Component Accessibility #

• Global instance: In child components, accessing the root instance via app bypasses Vue’s intended data flow patterns (props down, events up). This makes child components dependent on the global environment, so they can’t be reused in other contexts without modification.
• Component this: For cross-component communication, Vue encourages using props to pass data down from parent to child, or events to send data up. If you need shared state across multiple components, tools like Pinia or Vuex are designed to handle this cleanly—far better than relying on global instance references.

5. Reactivity & Edge Cases #

• Global instance: While reactivity works for app.requests in your root instance, accessing it in non-root components can lead to issues if the global instance is destroyed (e.g., in a single-page app during route navigation). You might end up trying to access properties on a destroyed instance, causing runtime errors.
• Component this: Vue manages component instances’ reactivity and lifecycle cleanup automatically. When a component is destroyed, this is no longer accessible, preventing invalid state access. Reactivity also works seamlessly with this, as Vue tracks dependencies for the component’s internal state.

A Quick Note on Your Example #

In your root instance’s created hook, this.requests and app.requests work interchangeably because this refers directly to the global app instance here. But this is only true for the root instance—once you start working with child components, the two approaches diverge drastically.

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