Hey there! Let's break down your questions about Vue 3 vs Vue 2 instance access step by step:

1. What's the equivalent of Vue 2's __vue__ in Vue 3? #

In Vue 2, the DOM element a component was mounted to had a __vue__ property pointing directly to the component instance. Vue 3 changes this implementation:

• In development mode, the DOM element will have a __vnode__ property, and you can access the component instance via element.__vnode__.component.
• Important note: All properties prefixed with double underscores like this are Vue's internal private APIs. The Vue team doesn't recommend relying on them because they can be changed or removed without warning in future versions. For a stable way to access a component instance from outside, use template refs and defineExpose in the component to explicitly expose the methods/properties you need.

As for __vueParentComponent you noticed, that's also an internal private property. Directly accessing __vueParentComponent.props.x is not a good practice. Instead, use Vue 3's official patterns:

• For parent-child component communication, use defineProps in the child component to receive props from the parent.
• For cross-level communication, use provide/inject which is designed for this exact use case.

2. How to access custom variables added to the component instance in beforeCreate? #

This depends on whether you're using the Options API or Composition API:

Options API #

In the Options API's beforeCreate hook, this already refers to the component instance (even though reactive data hasn't been initialized yet). You can directly attach custom variables to this:

export default {
  beforeCreate() {
    // Attach a custom variable to the instance
    this.myCustomVar = "Hello from beforeCreate!";
  },
  mounted() {
    // Access it in other hooks
    console.log(this.myCustomVar); // Logs "Hello from beforeCreate!"
  }
};

Keep in mind: Variables added this way are not reactive. If you need reactivity, define the variable in the data option or use ref/reactive instead.

Composition API #

In the Composition API, the setup function runs between beforeCreate and created, so you can define variables there directly and expose them to templates or other hooks:

import { onMounted } from "vue";

export default {
  setup() {
    // This runs during the beforeCreate/created phase
    const myCustomVar = "Hello from setup!";

    onMounted(() => {
      console.log(myCustomVar); // Logs "Hello from setup!"
    });

    // Expose to the template
    return { myCustomVar };
  }
};

If you really need to access the instance in a lifecycle hook, you can use getCurrentInstance(), but again, directly modifying internal instance properties is not recommended. Stick to Vue's official reactive state management tools whenever possible.

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