Vue3中的setup函数如何使用

Vue3引入了Composition API，其中setup函数是Composition API的核心部分。setup函数在组件实例创建之前执行，用于替代Vue2中的data、methods、computed等选项。本文将详细介绍setup函数的使用方法。

1. setup函数的基本用法

setup函数是Vue3组件中的一个新的生命周期钩子，它在组件实例创建之前执行。setup函数接收两个参数：

• props：组件的props对象。
• context：包含attrs、slots、emit等属性的上下文对象。

setup函数返回一个对象，该对象的属性将暴露给模板使用。

import { ref } from 'vue';

export default {
  props: {
    message: String
  },
  setup(props, context) {
    const count = ref(0);

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

    return {
      count,
      increment
    };
  }
};

在上面的例子中，setup函数返回了一个包含count和increment的对象，这些属性和方法可以在模板中直接使用。

2. 响应式数据

在setup函数中，可以使用ref和reactive来创建响应式数据。

2.1 ref

ref用于创建一个响应式的引用值，通常用于基本类型的数据（如String、Number、Boolean等）。

import { ref } from 'vue';

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

    return {
      count
    };
  }
};

在模板中使用count时，需要通过count.value来访问其值。

2.2 reactive

reactive用于创建一个响应式的对象，通常用于复杂类型的数据（如Object、Array等）。

import { reactive } from 'vue';

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

    return {
      state
    };
  }
};

在模板中可以直接访问state对象的属性。

3. 生命周期钩子

在setup函数中，可以使用onMounted、onUpdated、onUnmounted等生命周期钩子。

import { onMounted, onUnmounted } from 'vue';

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

    onUnmounted(() => {
      console.log('Component is unmounted!');
    });
  }
};

4. watch和computed

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

4.1 watch

watch用于监听响应式数据的变化。

import { ref, watch } from 'vue';

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

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

    return {
      count
    };
  }
};

4.2 computed

computed用于创建计算属性。

import { ref, computed } from 'vue';

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

    return {
      count,
      doubleCount
    };
  }
};

5. emit事件

在setup函数中，可以使用context.emit来触发自定义事件。

export default {
  setup(props, context) {
    function handleClick() {
      context.emit('custom-event', 'Hello from child');
    }

    return {
      handleClick
    };
  }
};

在父组件中监听custom-event事件即可接收到子组件传递的数据。

6. 总结

setup函数是Vue3中Composition API的核心，它提供了一种更灵活的方式来组织组件的逻辑。通过setup函数，我们可以更方便地管理响应式数据、生命周期钩子、计算属性、监听器等。掌握setup函数的使用，能够帮助我们编写更加模块化和可维护的Vue3组件。