The setup function in Vue 3.0 is a completely new option. It is a function executed when component creation is used to replace the beforeCreate and created hook functions in the past. The function of the setup function is to separate the state and behavior of the component, making the component clearer and easier to maintain.
In this article, we will explain in detail the role and usage of the setup function, and provide code examples to help readers better understand.
1. Overview of setup function
concept
The setup function is a new keyword added to Vue 3.0. It is a function executed when component creation is created. This function takes two parameters: props and context. Among them, props is an object that contains all props attributes received by the component; context is an object that contains some attributes and methods related to component instances. In the setup function, we can use these two parameters to access and set the state and behavior of the component. Use scenarios
Declare responsive data and computed properties
Register event handling function
Define life cycle hook function
Register subcomponents
Access properties and methods of parent component
Access global objects such as routing and state manager
2. How to use the setup function
1. Declare responsive data and computational properties
In the setup function, we can declare responsive data and computed properties like in Vue. However, in Vue 3.0, we need to use ref and computed functions to complete these operations.
<template>
<div>{{ count }}, {{ doubleCount }}</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
name: 'Example',
setup() {
const count = ref(0);
const doubleCount = computed(() => * 2);
return {
count,
doubleCount
};
}
};
</script>In the above code, we use the ref function to declare a responsive count variable, and use the computed function to create a computed attribute doubleCount, which relies on the count variable.
2. Register event handling function
In Vue, we can define an event handler function in the methods option. In Vue 3.0, we can use ordinary JavaScript functions in the setup function to achieve the same function.
<template>
<button @click="increment">{{ count }}</button>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'Example',
setup() {
const count = ref(0);
const increment = () => {
++;
};
return {
count,
increment
};
}
};
</script>In the above code, we declare a responsive count variable using ref and define a function called increment, which adds the value of the count variable by 1 when clicking the button.
3. Define life cycle hook function
In Vue, we can perform some initialization operations in the created and mounted hook functions. In Vue 3.0, we can use onMounted and onUnmounted functions in the setup function to achieve the same function.
<template>
<div>{{ message }}</div>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue';
export default {
name: 'Example',
setup() {
const message = ref('');
const intervalId = setInterval(() => {
+= 'hello ';
}, 1000);
onMounted(() => {
('mounted');
});
onUnmounted(() => {
('unmounted');
clearInterval(intervalId);
});
return {
message
};
}
};
</script>In the above code, we declare a responsive message variable using ref and add a string to the variable using the setInterval function. In the setup function, we use the onMounted function to register a function, which is executed when the component is mounted; use the onUnmounted function to register a function, which is executed when the component is unloaded. In this example, we clear the timer when the component is uninstalled.
4. Register subcomponents
In Vue, we can register child components into parent components using the components option. In Vue 3.0, we can use ordinary JavaScript functions in the setup function to register subcomponents.
<template>
<div>
<Child />
</div>
</template>
<script>
import { defineComponent } from 'vue';
import Child from './';
export default defineComponent({
name: 'Example',
components: {
Child
},
setup() {
return {};
}
});
</script>In the above code, we use the defineComponent function to define a component with the ability to register subcomponents. In the setup function, we return an empty object.
5. Access the properties and methods of parent component
In Vue, we can access the properties and methods of the parent component through properties and methods such as p a re e n t and parent and emit. In Vue 3.0, we can use inject and provide functions in the setup function to obtain and provide properties.
<!-- parent -->
<template>
<div>
<Child :increment="increment" />
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import Child from './';
export default defineComponent({
name: 'Example',
components: {
Child
},
setup() {
const count = ref(0);
const increment = () => {
++;
};
provide('increment', increment);
return {
count
};
}
});
</script><template>
<button @click="increment">{{ count }}</button>
</template>
<script>
import { defineComponent, inject } from 'vue';
export default defineComponent({
name: 'Child',
props: ['increment'],
setup() {
const count = inject('count');
return {
count
};
}
});
</script>In the above code, we use the provide function to provide a function called increment and use the inject function to get the function in the child component. Note that when calling the provide function, we need to pass a key-value pair to represent the relationship between the provided attribute and the value.
6. Access global objects such as routing and state manager
In addition to accessing the properties and methods of the parent component, we can also access other global objects in the setup function, such as routes and state managers.
<template>
<div>{{ count }}</div>
</template>
<script>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
export default {
name: 'Example',
setup() {
const count = ref(0);
const route = useRoute();
const router = useRouter();
const navigate = () => {
('/');
};
return {
count,
route,
navigate
};
}
};
</script>In the above code, we use the useRoute and useRouter functions to access route-related properties and methods. Among them, the useRoute function returns the current routing object, including the path, parameters, query parameters and other information of the current routing; the useRouter function returns a route manager object, including some commonly used routing operation methods, such as push and replace. In the setup function, we provide the component with a function called navigate to jump to the home page.
3. Summary
This article mainly introduces the setup function in Vue 3.0, including its overview, usage scenarios and specific usage. Through the introduction of this article, we can see that the setup function is an important tool used to separate the state and behavior of components. We can declare responsive data and computed properties in the setup function, register event handling functions, define life cycle hook functions, register child components, access properties and methods of parent components, and access global objects such as routing and state managers. By using the setup function rationally, we can make the components clearer and easier to maintain.
This is the article about the role of setup in vue3 and the use scenario analysis. For more related content on the role of setup in vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!