Vue 3 的 setup 函数使用及避坑指南

本文主要是介绍Vue 3 的 setup 函数使用及避坑指南，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue 3 的 setup 函数是 Vue 3 Composition API 的核心部分，它使得代码的复用和组织变得更加简单。

setup 的基本用法：
setup 函数是在组件实例被创建之后，但是在其被挂载之前被调用的。setup 函数接收两个参数：props 和 context。props 是父组件传递给当前组件的属性，而 context 是一个包含三个属性的对象：attrs、slots、emit。

例如：

<script>
export default {props: {msg: String},setup(props, context) {console.log(props.msg) // 打印从父组件传递下来的msg属性console.log(context.attrs) // 打印非prop属性}
}
</script>

setup 与生命周期：
Vue 3 提供了几个新的函数，如 onMounted、onUpdated 和 onUnmounted，这些函数在 setup 函数内部使用，用来处理组件生命周期。例如，onMounted 函数会在组件被挂载到 DOM 后调用。

例如：

<script>
import { onMounted } from 'vue'export default {setup() {onMounted(() => {console.log('Component is mounted!')})}
}
</script>

setup 中定义的响应式数据或函数如何使用：
在 setup 函数中，你可以使用 ref 和 reactive 函数来创建响应式数据。这些数据可以在模板中直接使用。而在 setup 函数中定义的函数，可以在模板中作为事件处理函数。

例如：

<template><button @click="increment">{{ count }}</button>
</template><script>
import { ref } from 'vue'export default {setup() {const count = ref(0)function increment() {count.value++}return { count, increment }}
}
</script>