快速了解Vue3的setup执行时机「附代码示例」

1. 什么是Vue3 setup函数？

在Vue3中，setup函数是一个全新的函数，它取代了Vue2中的created、beforeMount、mounted等生命周期函数，它是组件内的一个普通函数，负责组件的初始化、响应式数据的设定以及一些函数的设置。setup函数是一个重要的函数，因为它为Vue3提供了更加灵活的组件开发方式，让我们可以更加方便地实现组件化开发。

2. setup函数的执行时机

setup函数是在beforeCreate和created生命周期函数之前执行的。由于它是在组件初始化的过程中执行，所以它可以访问组件的props，但是访问不到组件的data、computed和methods等属性。

值得注意的是，setup函数只会执行一次。这意味着，当组件被重新渲染时，setup函数不会再次执行。因此，我们可以在setup函数中设置需要在组件生命周期中一直存在的东西，例如响应式数据、计算属性和函数等。

3. setup函数的使用

3.1 响应式数据

在Vue3中，响应式数据的创建方式与Vue2有所不同。在Vue3中，我们可以使用ref函数或reactive函数创建响应式数据。

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() {
      count.value++
    }
    return {
      count,
      increment
    }
  }
}

上面的代码中，我们使用ref函数创建了一个名为count的响应式数据，并将其初始化为0。我们还在setup函数中定义了一个名为increment的函数，用于将count的值加1。

3.2 计算属性

在Vue3中，我们可以使用computed函数来创建计算属性。计算属性的用法与Vue2类似，只是需要在setup函数内部使用computed。

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => {
      return count.value * 2
    })
    return {
      count,
      doubleCount
    }
  }
}

上面的代码中，我们使用computed函数创建了一个名为doubleCount的计算属性，它返回的是count的值乘以2。

3.3 方法

在Vue3中，我们可以使用普通的函数来创建组件的方法。这些方法可以在组件中直接调用。

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() {
      count.value++
    }
    return {
      count,
      increment
    }
  }
}

上面的代码中，我们在setup函数中定义了一个名为increment的函数，用于将count的值加1。在组件中，我们可以直接调用increment函数来实现count的自增。

4. setup函数的注意事项

虽然setup函数为我们提供了更加灵活的组件开发方式，但是它也有一些注意事项需要我们注意。

注意1：setup函数内部不可使用this

在Vue2中，我们可以在组件内部使用this来访问组件的属性和方法。但是在Vue3中，setup函数中的this是undefined，因此我们无法使用this来访问组件内部的属性和方法。

注意2：setup函数内部不可使用template模板

在Vue2中，我们可以在组件中使用template模板来描述组件的结构。但是，在Vue3中，template模板已经被废除了。所以，在setup函数内部是不能使用template模板的。

注意3：setup函数中的props是只读的

在Vue3中，组件的props是只读的，并且只能在组件的模板中进行使用，无法在组件内部直接修改。如果需要修改props的值，可以通过emit方式来实现。

5. 总结

在Vue3中，setup函数是一个全新的函数，它取代了Vue2中的created、beforeMount、mounted等生命周期函数，负责组件的初始化、响应式数据的设定以及一些函数的设置。它是一个重要的函数，因为它为Vue3提供了更加灵活的组件开发方式，让我们可以更加方便地实现组件化开发。

在使用setup函数时需要注意，它内部不可使用this和template模板，同时它的props是只读的。我们在使用setup函数时，可以通过创建响应式数据、计算属性和方法等来实现我们的需求。