Vue3中的setup执行时机与注意点是什么

Vue3 引入了 Composition API，其中 setup 函数是 Composition API 的核心部分。setup 函数在组件实例创建之前执行，用于定义组件的响应式状态、计算属性、方法等。理解 setup 函数的执行时机及其注意点，对于正确使用 Composition API 至关重要。

1. setup 函数的执行时机

setup 函数在组件实例创建之前执行，具体来说，它是在 beforeCreate 生命周期钩子之前执行的。这意味着在 setup 函数中，组件的实例尚未创建，因此无法访问 this。

export default {
  setup() {
    console.log('setup 执行了');
  },
  beforeCreate() {
    console.log('beforeCreate 执行了');
  },
  created() {
    console.log('created 执行了');
  }
};

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

2. setup 函数的参数

setup 函数接收两个参数：

• props：组件的 props 对象，包含了父组件传递过来的所有属性。
• context：一个上下文对象，包含了 attrs、slots、emit 等属性。

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

3. setup 函数的返回值

setup 函数可以返回一个对象，该对象中的属性和方法可以在模板中直接使用。返回的对象会被合并到组件的渲染上下文中。

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

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

    return {
      count,
      increment
    };
  }
};

在上述代码中，count 和 increment 可以在模板中直接使用。

4. setup 函数的注意点

4.1 无法访问 this

由于 setup 函数在组件实例创建之前执行，因此在 setup 中无法访问 this。这意味着你不能在 setup 中使用 this.$store、this.$router 等 Vue2 中常用的实例属性。

export default {
  setup() {
    // 错误：无法访问 this
    console.log(this.$store);
  }
};

4.2 响应式数据的处理

在 setup 中，你需要使用 ref 或 reactive 来创建响应式数据。ref 用于基本类型数据，而 reactive 用于对象或数组。

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({
      name: 'Vue3',
      version: '3.0'
    });

    return {
      count,
      state
    };
  }
};

4.3 生命周期钩子的使用

在 setup 中，你可以使用 onMounted、onUpdated 等生命周期钩子函数来替代 Vue2 中的 mounted、updated 等钩子。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件挂载完成');
    });
  }
};

4.4 setup 中的异步操作

在 setup 中执行异步操作时，需要注意异步操作的执行时机。你可以使用 async/await 来处理异步操作。

export default {
  async setup() {
    const data = await fetchData();
    return {
      data
    };
  }
};

5. 总结

setup 函数是 Vue3 Composition API 的核心，它在组件实例创建之前执行，用于定义组件的响应式状态、计算属性、方法等。在使用 setup 时，需要注意以下几点：

• setup 函数无法访问 this。
• 使用 ref 或 reactive 创建响应式数据。
• 使用 onMounted、onUpdated 等生命周期钩子函数。
• 在 setup 中执行异步操作时，注意异步操作的执行时机。

通过正确理解和使用 setup 函数，你可以更好地利用 Vue3 的 Composition API 来构建复杂的组件逻辑。