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

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

1. 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>

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

例如：

<script>
import { onMounted } from 'vue'

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

3. 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>

容易出现的坑：

1. 不要在 setup 函数外部访问响应式数据。因为 setup 函数在组件初始化阶段执行，此时还没有响应式数据。
2. 在 setup 函数中，所有的数据和方法都应该通过 return 返回，否则无法在模板中使用。
3. 注意生命周期钩子的使用，错误的使用可能会导致意想不到的问题。例如，如果在 onUnmounted 钩子中访问了已经被销毁的实例属性，可能会引发错误。
4. 注意 props 的更新。由于 props 是响应式的，如果你在 setup 函数中对 props 进行了复制操作，那么你的复制将不会更新。