Solve the error of undefined attributes in Vue 3 setup function: In-depth understanding of data exposure mechanism

This article aims to resolve the common Property 'xxx' was accessed during render but is not defined on instance. This error usually originates from the setup function that does not correctly return the responsive data or method required by the template. The tutorial will deeply analyze the data exposure mechanism of the setup function and use actual code examples to demonstrate how to ensure that the template can access the correct responsive references, thereby effectively avoiding rendering problems caused by undefined properties.

Understand the setup function in the Vue 3 Composition API

In Vue 3's Composition API, the setup function is the core entry to component logic. It is executed before the component instance is created and is the starting point of the composables. The setup function is responsible for declaring responsive states, computed properties, methods, and lifecycle hooks, etc., and ultimately exposes them to the component's template or other component options.

A common mistake is that responsive data is declared in the setup function (such as using ref or reactive) but forget to return it. When the template tries to access these unreturned properties, a runtime error in Property "xxx" was accessed during render but is not defined on instance. This is because the setup function has a key responsibility: all properties in the object it returns will be exposed to the template for template rendering.

Error example analysis

Consider the following code snippet, which tries to get a quote from the API and displays it in the template:

 <template>
  <div>
    <i>{{quote}}</i>
    <p>Kanye West</p>
  </div>
</template>

<script>
import axios from &#39;axios&#39;
import { ref } from &#39;vue&#39;

export default {
  setup() {
    const quote = ref(&#39;&#39;) // Declare responsive reference const getQuote = async () => {
      const response = await axios.get(&#39;https://api.kanye.rest/&#39;)
      quote.value = response.data.quote
    }
    getQuote() // Call method to get data// ⚠️ Error point: The return to quote is missing here}
}
</script>

Although the ref of quote is declared inside the setup function and the getQuote method is called to update its value, since the setup function does not explicitly return quote, Vue's template compiler cannot find the property quote when rendering, resulting in the error of Property "quote" was accessed during render but is not defined on instance.

Correct data exposure and lifecycle management

To solve the above problem, just make sure that the setup function returns all the responsive data and methods that you need to access in the template. Additionally, for asynchronous operations like API requests, it is often recommended to perform after component mount to ensure that the DOM is ready and to avoid some potential issues with server-side rendering (SSR). This can be achieved by using the onMounted lifecycle hook.

Here is a revised code example:

 <template>
  <div>
    <i v-if="quote">{{ quote }}</i>
    <p v-else>Loading quotes...</p>
    <p>Kanye West</p>
  </div>
</template>

<script>
import axios from &#39;axios&#39;
import { ref, onMounted } from &#39;vue&#39; // Introduce onMounted

export default {
  setup() {
    const quote = ref(&#39;&#39;) // Declare responsive reference const getQuote = async () => {
      try {
        const response = await axios.get(&#39;https://api.kanye.rest/&#39;)
        quote.value = response.data.quote
      } catch (error) {
        console.error(&#39;Failed to get quote:&#39;, error)
        quote.value = &#39;The loading quote failed, please try again later. &#39; // Error handling}
    }

    // Use the onMounted hook to ensure that the API request is executed after the component is mounted onMounted(() => {
      getQuote()
    })

    // ✅ Key: Return quote from the setup function to make it available in the template return {
      quote
    }
  }
}
</script>

Code parsing:

1. import { ref, onMounted } from 'vue' : In addition to ref, we also introduced onMounted lifecycle hook.
2. onMounted(() => { getQuote() }) : Encapsulate the call of the getQuote method in the onMounted hook. This means that API requests will only be executed after the component is first mounted to the DOM.
3. return { quote } : This is the key to solving the problem. By returning an object containing the quote attribute, we explicitly expose the quote responsive reference to the component's template. Now, the {{ quote }} in the template can correctly access the current value of quote.
4. Error handling : Added try...catch block to handle possible errors in API requests, improving application robustness.
5. Conditional rendering : Use v-if="quote" to display the loading status before data loading is completed to improve user experience.

Notes and best practices

• The return value of the setup function : The setup function can return an object in which properties and methods are exposed to component instances, including templates. It is also possible to return a render function, but this is not a common usage.
• Responsive data type : For basic data types (strings, numbers, booleans), use ref. For objects and arrays, you can use reactive or ref (ref internally uses reactive to handle objects). No matter which one is used, it must be returned from the setup to be used in the template.
• Lifecycle hook : Use lifecycle hooks such as onMounted, onUpdated, and onUnmounted within the setup function to organize and manage the side effects of components.
• Organize code : As component logic becomes more complex, relevant responsive data, computed properties and methods can be organized into independent composable functions to improve the reusability and maintainability of the code.
• TypeScript support : When using TypeScript, the return type of the setup function can be explicitly declared to provide a better type checking and development experience.

Summarize

Property 'xxx' was accessed during render but is not defined on instance. The error is a common prompt in the Vue 3 Composition API, which explicitly states that the properties the template attempts to access are not properly exposed from the setup function. The core of solving this problem lies in understanding the responsibility of the setup function: it is not only a place to declare component logic, but also a "exit" for providing responsive data and methods to the template. By correctly returning the required responsive references from the setup function and managing asynchronous operations with lifecycle hooks such as onMounted, developers can build more robust and maintainable Vue 3 applications.

The above is the detailed content of Solve the error of undefined attributes in Vue 3 setup function: In-depth understanding of data exposure mechanism. For more information, please follow other related articles on the PHP Chinese website!