Vue 3.0中的setup函数是一个全新的选项,它是在组件创建时执行的一个函数,用于替代Vue2.x中的beforeCreate和created钩子函数。setup函数的作用是将组件的状态和行为进行分离,使得组件更加清晰和易于维护。
在本文中,我们将详细讲解setup函数的作用和使用方法,并提供代码示例来帮助读者更好地理解。
一、setup函数的概述
- 概念
setup函数是Vue 3.0新增的一个关键字,它是在组件创建时执行的函数。该函数接收两个参数:props和context。其中,props是一个对象,包含了组件接收到的所有props属性;context是一个对象,包含了一些与组件实例相关的属性和方法。在setup函数中,我们可以使用这两个参数来访问并设置组件的状态和行为。 - 使用场景
声明响应式的数据和计算属性
注册事件处理函数
定义生命周期钩子函数
注册子组件
访问父级组件的属性和方法
访问路由和状态管理器等全局对象
二、如何使用setup函数
- 声明响应式的数据和计算属性
在setup函数中,我们可以像Vue 2.x中一样声明响应式的数据和计算属性。不过在Vue 3.0中,我们需要使用ref和computed函数来完成这些操作。
java
<template>
<div>{{ count }}, {{ doubleCount }}</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
name: 'Example',
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
return {
count,
doubleCount
};
}
};
</script>
在上面的代码中,我们使用ref函数来声明一个响应式的count变量,并使用computed函数来创建一个计算属性doubleCount,该计算属性依赖于count变量。
- 注册事件处理函数
在Vue 2.x中,我们可以在methods选项中定义一个事件处理函数。而在Vue 3.0中,我们可以在setup函数中使用普通的JavaScript函数来实现相同的功能。
java
<template>
<button @click="increment">{{ count }}</button>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'Example',
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
};
</script>
在上面的代码中,我们使用ref声明了一个响应式的count变量,并定义了一个名为increment的函数,在点击按钮时会将count变量的值加1。
- 定义生命周期钩子函数
在Vue 2.x中,我们可以在created和mounted钩子函数中执行一些初始化操作。而在Vue 3.0中,我们可以在setup函数中使用onMounted和onUnmounted函数来实现相同的功能。
java
<template>
<div>{{ message }}</div>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue';
export default {
name: 'Example',
setup() {
const message = ref('');
const intervalId = setInterval(() => {
message.value += 'hello ';
}, 1000);
onMounted(() => {
console.log('mounted');
});
onUnmounted(() => {
console.log('unmounted');
clearInterval(intervalId);
});
return {
message
};
}
};
</script>
在上面的代码中,我们使用ref声明了一个响应式的message变量,并使用setInterval函数定时向该变量中添加字符串。在setup函数中,我们使用onMounted函数注册一个函数,在组件挂载时执行;使用onUnmounted函数注册一个函数,在组件卸载时执行。在本例中,我们在组件卸载时清除了定时器。
- 注册子组件
在Vue 2.x中,我们可以使用components选项将子组件注册到父组件中。而在Vue 3.0中,我们可以在setup函数中使用普通的JavaScript函数来注册子组件。
java
<template>
<div>
<Child />
</div>
</template>
<script>
import { defineComponent } from 'vue';
import Child from './Child.vue';
export default defineComponent({
name: 'Example',
components: {
Child
},
setup() {
return {};
}
});
</script>
在上面的代码中,我们使用defineComponent函数定义了一个具有注册子组件能力的组件。在setup函数中,我们返回了一个空对象。
- 访问父级组件的属性和方法
在Vue 2.x中,我们可以通过 p a r e n t 和 parent和 parent和emit等属性和方法来访问父级组件的属性和方法。而在Vue 3.0中,我们可以在setup函数中使用inject和provide函数来获取和提供属性。
java
<!-- parent -->
<template>
<div>
<Child :increment="increment" />
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue';
export default defineComponent({
name: 'Example',
components: {
Child
},
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
provide('increment', increment);
return {
count
};
}
});
</script>
java
<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>
在上面的代码中,我们使用provide函数提供了一个名为increment的函数,并在子组件中使用inject函数获取该函数。注意,在调用provide函数时,我们需要传递一个键值对,表示提供的属性和值的关系。
- 访问路由和状态管理器等全局对象
除了访问父级组件的属性和方法之外,我们还可以在setup函数中访问其他全局对象,比如路由和状态管理器等。
java
<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 = () => {
router.push('/');
};
return {
count,
route,
navigate
};
}
};
</script>
在上面的代码中,我们使用useRoute和useRouter函数来访问路由相关的属性和方法。其中,useRoute函数返回了当前路由对象,包含了当前路由的路径、参数、查询参数等信息;useRouter函数返回了一个路由管理器对象,包含了一些常用的路由操作方法,比如push和replace等。在setup函数中,我们为组件提供了一个名为navigate的函数,用于跳转到主页。
三、总结
本文主要介绍了Vue 3.0中的setup函数,包括其概述、使用场景和具体用法。通过本文的介绍,我们可以看到,setup函数是用来将组件的状态和行为进行分离的一个重要工具。我们可以在setup函数中声明响应式的数据和计算属性、注册事件处理函数、定义生命周期钩子函数、注册子组件、访问父级组件的属性和方法,以及访问路由和状态管理器等全局对象。通过合理使用setup函数,我们可以使得组件更加清晰和易于维护。
作者:Cosolar
链接:https://juejin.cn/post/7228565447947354172
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。