Vue.js 是一款流行的前端 JavaScript 框架。在 Vue.js 3 中，一个新的组件选项
setup 被引入，它被设计为在组件实例化之前运行的函数。本篇博客将深入探讨 Vue.js 3 的 setup 函数以及它的作用。
Vue.js 2 的 options API
在 Vue.js 2 中，我们使用 data、computed、methods 等选项来定义组件实例的相关属性和方法，这就是常说的 Options API。例如：
export default {
data() {
return {
message: 'Hello, World!'
}
},
computed: {
greeting() {
return this.message + ' from a computed property'
}
},
methods: {
handleClick() {
console.log('Button clicked!')
}
}
}
然而，对于复杂的组件，在 Options API 下编写组件逻辑可能会变得不太直观或难以维护，因此 Vue.js 3 推出了一个更加灵活的API——Composition API。
Vue.js 3 的 Composition API
Composition API 提供了按照逻辑相关性组合代码的方式，从而使代码可读性更高并且更易于维护。通过 Composition API，我们可以使用 setup 函数来替代 Options API 下的 data、computed、methods 等选项。
setup 函数的语法
setup 函数需要在组件实例化之前运行。它接受两个参数：props 和 context。
setup(props, context) {
// ...
}
props是通过父组件传递给子组件的属性，类似于 Options API 下的props选项。context包含了 Vue.js 的核心API，例如emit、slots和attrs等。
在 setup 函数中定义响应式数据
在 setup 函数中，我们可以使用 ref、reactive 和 computed 工具来定义响应式数据。
ref将普通的 JavaScript 数据类型转换成响应式数据类型。reactive可以将整个对象转换成响应式数据类型。computed可以监听数据变化并返回计算后的结果。
import { ref, reactive, computed } from 'vue'
export default {
setup() {
const message = ref('Hello, World!')
const user = reactive({
name: 'Tom',
age: 20
})
const greeting = computed(() => `My name is ${user.name}, and I'm ${user.age} years old.`)
return {
message,
user,
greeting
}
}
}
在 setup 函数中处理事件
如需在 setup 函数中处理事件并与父组件通信，则需要在 setup 函数中返回一个对象，该对象包含要公开的函数，并使用 provide 方法将这些函数提供给父组件。
import { ref, provide } from 'vue'
export default {
setup(props, context) {
const count = ref(0)
const handleClick = () => {
count.value++
context.emit('increment', count.value)
}
provide('handleClick', handleClick)
return {
count
}
}
}
在父组件中，我们可以使用 inject 来注入这些函数，并将其用作事件处理程序。
<template>
<button @click="handleClick">Click me</button>
</template>
<script>
import { inject } from 'vue'
export default {
name: 'ParentComponent',
setup() {
const handleClick = inject('handleClick')
return {
handleClick
}
}
}
</script>
总结
在 Vue.js 3 中，setup 函数是 Composition API 的核心，它提供了一种更加灵活的方式来编写 Vue 组件。通过使用 setup 函数，我们可以在组件实例化之前定义响应式数据、处理事件以及与父组件进行通信。相比于 Options API 下的 data、computed 和 methods 等选项，Composition API 提供了更加直观和易于维护的方式来组织代码。
如果你是一个 Vue.js 2 用户并想要学习 Vue.js 3 的 Composition API，请注意：虽然 Composition API 是一个强大的工具，但并不是必须要使用它来编写 Vue 组件。在某些情况下，Options API 也可以很好地满足你的需求。因此，在使用 Composition API 时，需要仔细考虑其是否真正符合你的项目需求。
本文只是对 Vue.js 3 的 setup 函数进行了简单的介绍，如果你想深入了解 Composition API，请查看 Vue.js 官方文档。
