setup is a new component option introduced in Vue 3. It is a function called before the component instance is created, used to set the initial state of the component, computed properties, methods, etc. The setup function is the core part of functional components in Vue 3, and it provides a new way to write component logic.
There are several steps to use the setup function
1. Import the required functions and reactive APIs: Inside the setup function, you can use the import statement to import the functions and reactive APIs provided by Vue, such as ref, reactive, etc.
2. Define the state and computed properties of the component: Inside the setup function, the imported functions and APIs can be used to define the state and computed properties of the component. For example, you can use the ref function to create a responsive state, or use the computed function to create a computed property.
3. Methods for defining components: Inside the setup function, methods of components can be defined, and these methods can be called in the template. You can use ordinary JavaScript functions to define methods, or you can use ref functions to create a responsive method.
4. Return the component's data and methods: At the end of the setup function, an object needs to be returned, which contains the component's data and methods. This way, these data and methods can be used in the component's templates.
The principle analysis of the setup function is as follows:
The function is called before the component instance is created and it receives two parameters: props and context.
- props is a responsive object containing the properties of the component.
- context is an object that contains some attributes and methods related to component instances, such as attrs, slots, emit, etc.
2. Inside the setup function, props and context can be used to access the component's properties and context information.
The imported functions and APIs can be used inside the function to define the state, computed properties and methods of the component.
The function returns an object that contains the data and methods of the component. This object will be used as the context of the component instance.
To sum up, the setup function is a new way to write component logic in Vue 3. It provides a more flexible and direct way to define the state, computed properties, and methods of components. By importing functions and APIs, it is easy to create responsive states, computed properties, and methods and return them to component instances for use.
Changes brought by setup
Using the setup function has brought many changes, and the following are at least ten changes:
- How component logic is organized: the setup function concentrates the logic of the component in one function, rather than spreads it in different options, making the component's code more centralized and clear.
- Better type inference: Since the setup function is executed at compile time, Vue 3 can better infer the type of component, providing better type checking and editor support.
- Better code reuse: By encapsulating the logic of the component in the setup function, it is easier to replicate the logic to multiple components, improving the maintainability and reusability of the code.
- More flexible component state definition: In the setup function, you can use ref, reactive and other functions to define the state of the component, making the definition of the state more flexible and intuitive.
- More flexible definition of computed attributes: Computed function can be used in the setup function to define computed attributes, making the definition of computed attributes more flexible and concise.
- More flexible method definition: In the setup function, ordinary JavaScript functions can be used to define component methods, or ref functions can be used to create responsive methods, making the definition of methods more flexible and diverse.
- Better component property access: Through the props parameter, you can directly access the component's properties without using this.$props inside the setup function.
- Better context access: Through the context parameter, context information related to component instances can be directly accessed, such as attrs, slots, emit, etc.
- Better responsive processing: Reactive functions can create a responsive object, making the state and data of the component easier to responsively process.
- Better error handling: The setup function can return a Promise. If the Promise is rejected, Vue 3 will pass the error to the global error handler, making error handling more convenient and unified.
These changes make the component writing more flexible, intuitive and efficient, and improve development efficiency and code quality.
setup source code analysis
The setup function is a new feature in Vue 3, which is used to execute some logic during the component creation stage. The following is a brief analysis of the setup function source code:
Function definition: The definition of the setup function is located in the src/runtime-core/ file. It is a method of component instances that is responsible for executing component initialization logic.
Function execution timing: The setup function is called during the component instance creation stage, and is executed in the createComponentInstance function. At this stage, the components' props, attrs, slots and other properties have been parsed and collected.
Function parameters: The setup function receives two parameters, namely props and context. The props parameter is a responsive object that contains the properties of the component. The context parameter is a context object that contains information related to component instances, such as attrs, slots, emit, etc.
Function return value: The setup function can return an object or function, and this return value will be used as the rendering context of the component. If an object is returned, the properties of the object are merged into the rendering context of the component. If a function is returned, the function will be used as a rendering function for the component.
Function execution environment: During the execution of the setup function, this inside it points to the component instance. This means that the properties and methods of component instances can be accessed inside the setup function.
Notes on functions: In the setup function, this cannot be used to access the properties and methods of component instances, but should be directly accessed using props, context and other parameters. This is because the component instance has not been fully created when the setup function is executed.
Overall, the source code implementation of the setup function is relatively simple, mainly responsible for executing some logic during the component creation stage and returning an object or function as the rendering context of the component. Through props and context parameters, you can access the component's properties and context information.
Specific use
The following is a simple example code that demonstrates the use of the setup function:
import { reactive, onMounted } from 'vue';
export default {
setup() {
// Create a responsive object const state = reactive({
count: 0,
});
// Logic executed after component mount onMounted(() => {
('Component mounted');
});
// Return responsive objects and methods return {
state,
increment() {
++;
},
};
},
};In the above code, the setup function creates a responsive object state and executes a logic after the component is mounted, i.e. prints the log. Finally, use the state object and an increment method as the return value to make it the rendering context of the component.
In the component's template, state can be accessed and modified through the state object and increment method:
<template>
<div>
<p>Count: {{ }}</p>
<button @click="increment">Increment</button>
</div>
</template>This example shows the basic usage of the setup function, through which some logic can be executed during the component creation stage and returns an object or function as the rendering context of the component.
This is the end of this article about a brief analysis of the use and principles of vue3 setup. For more related vue3 setup content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!