Vue3中setup执行时机是什么及有哪些注意点

Vue3引入了Composition API，其中最核心的部分就是setup函数。setup函数是Vue3中组件逻辑的组织方式，它替代了Vue2中的data、methods、computed等选项。理解setup函数的执行时机及其注意点，对于正确使用Vue3至关重要。

1. setup函数的执行时机

setup函数是Vue3组件生命周期中的一个重要阶段，它在组件实例被创建之前执行。具体来说，setup函数的执行时机如下：

1.1 在beforeCreate和created之间

在Vue2中，beforeCreate和created是两个生命周期钩子，分别表示组件实例化之前和实例化之后。在Vue3中，setup函数在这两个钩子之间执行。也就是说，setup函数在组件实例化之前执行，但此时组件的props和context已经准备好。

export default {
  setup(props, context) {
    console.log('setup executed');
  },
  beforeCreate() {
    console.log('beforeCreate executed');
  },
  created() {
    console.log('created executed');
  }
}

在上述代码中，setup函数会在beforeCreate和created之间执行。

1.2 在props解析之后

setup函数的第一个参数是props，这意味着setup函数在props解析之后执行。因此，你可以在setup函数中访问到组件的props。

export default {
  props: {
    message: String
  },
  setup(props) {
    console.log(props.message); // 可以访问到props
  }
}

1.3 在context准备好之后

setup函数的第二个参数是context，它包含了attrs、slots、emit等属性。这些属性在setup函数执行时已经准备好，因此你可以在setup函数中使用它们。

export default {
  setup(props, context) {
    console.log(context.attrs); // 访问attrs
    console.log(context.slots); // 访问slots
    console.log(context.emit); // 访问emit
  }
}

2. setup函数的注意点

虽然setup函数非常强大，但在使用过程中也有一些需要注意的地方。

2.1 setup函数中没有this

在Vue2中，this指向组件实例，可以通过this访问data、methods等。但在Vue3的setup函数中，this是undefined。这是因为setup函数在组件实例化之前执行，此时组件实例还未创建。

export default {
  setup() {
    console.log(this); // undefined
  }
}

因此，在setup函数中，你不能使用this来访问组件实例的属性和方法。

2.2 setup函数中不能使用data和methods

在Vue2中，data和methods是组件选项，用于定义组件的数据和方法。但在Vue3中，setup函数替代了这些选项。因此，在setup函数中，你不能使用data和methods。

export default {
  setup() {
    // 不能这样定义data
    const state = {
      count: 0
    };

    // 不能这样定义methods
    function increment() {
      state.count++;
    }

    return {
      state,
      increment
    };
  }
}

2.3 setup函数中必须返回一个对象

setup函数必须返回一个对象，这个对象中的属性和方法可以在模板中使用。如果setup函数没有返回对象，模板中将无法访问任何数据或方法。

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
}

在上述代码中，setup函数返回了一个包含count和increment的对象，因此模板中可以访问这些属性和方法。

2.4 setup函数中可以使用ref和reactive

在setup函数中，你可以使用ref和reactive来创建响应式数据。ref用于创建基本类型的响应式数据，而reactive用于创建对象类型的响应式数据。

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({
      message: 'Hello Vue3'
    });

    return {
      count,
      state
    };
  }
}

2.5 setup函数中可以使用生命周期钩子

在setup函数中，你可以使用onMounted、onUpdated、onUnmounted等生命周期钩子。这些钩子函数可以在setup函数中直接使用，而不需要在setup函数外部定义。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted');
    });
  }
}

2.6 setup函数中可以使用watch和computed

在setup函数中，你可以使用watch和computed来监听数据变化和计算属性。

import { ref, watch, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount
    };
  }
}

2.7 setup函数中可以使用provide和inject

在setup函数中，你可以使用provide和inject来实现跨组件的数据传递。

import { provide, inject } from 'vue';

export default {
  setup() {
    provide('message', 'Hello from parent');

    const message = inject('message');

    return {
      message
    };
  }
}

3. 总结

setup函数是Vue3中组件逻辑的核心，它在组件实例化之前执行，替代了Vue2中的data、methods等选项。在使用setup函数时，需要注意以下几点：

• setup函数中没有this，不能使用data和methods。
• setup函数必须返回一个对象，模板中才能访问其中的属性和方法。
• setup函数中可以使用ref、reactive、watch、computed等Composition API。
• setup函数中可以使用onMounted、onUpdated等生命周期钩子。
• setup函数中可以使用provide和inject实现跨组件数据传递。

理解setup函数的执行时机及其注意点，有助于更好地使用Vue3的Composition API，编写出更加清晰、可维护的代码。