Vue3中setup()和reactive()函数怎么使用

Vue3 引入了 Composition API，其中 setup() 和 reactive() 是两个非常重要的函数。它们为开发者提供了更灵活和强大的方式来组织和管理组件的逻辑。本文将详细介绍这两个函数的使用方法。

1. setup() 函数

setup() 是 Composition API 的核心函数，它在组件实例创建之前执行。setup() 函数接收两个参数：props 和 context。

1.1 基本用法

import { ref } from 'vue';

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

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

    return {
      count,
      increment,
    };
  },
};

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

1.2 props 参数

props 是组件接收的属性，它是一个响应式对象。你可以在 setup() 中直接访问 props 中的属性。

export default {
  props: {
    initialCount: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const count = ref(props.initialCount);

    return {
      count,
    };
  },
};

1.3 context 参数

context 是一个普通的 JavaScript 对象，它包含了 attrs、slots 和 emit 等属性。

export default {
  setup(props, context) {
    const { attrs, slots, emit } = context;

    function handleClick() {
      emit('custom-event', 'Hello from setup');
    }

    return {
      handleClick,
    };
  },
};

2. reactive() 函数

reactive() 是 Vue3 提供的另一个重要函数，它用于创建一个响应式对象。与 ref() 不同，reactive() 直接作用于一个对象，而不是一个基本类型的值。

2.1 基本用法

import { reactive } from 'vue';

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

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

    return {
      state,
      increment,
    };
  },
};

在上面的例子中，state 是一个响应式对象，count 和 message 都是响应式的属性。

2.2 与 ref() 的区别

reactive() 和 ref() 都可以创建响应式数据，但它们的使用场景有所不同。

• ref() 通常用于基本类型的值（如 number、string 等），并且需要通过 .value 来访问和修改值。
• reactive() 用于对象或数组，直接访问和修改属性即可。

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({
      count: 0,
    });

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

    function incrementReactive() {
      state.count++;
    }

    return {
      count,
      state,
      incrementRef,
      incrementReactive,
    };
  },
};

2.3 嵌套对象

reactive() 可以处理嵌套对象，嵌套的对象也会被自动转换为响应式对象。

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      user: {
        name: 'John',
        age: 30,
      },
    });

    function updateName() {
      state.user.name = 'Jane';
    }

    return {
      state,
      updateName,
    };
  },
};

3. 总结

setup() 和 reactive() 是 Vue3 Composition API 中的两个核心函数。setup() 用于组织组件的逻辑，而 reactive() 用于创建响应式对象。通过合理使用这两个函数，可以大大提升代码的可读性和可维护性。

在实际开发中，你可以根据具体需求选择使用 ref() 或 reactive()，或者结合使用它们来管理组件的状态。希望本文能帮助你更好地理解和使用 Vue3 中的 setup() 和 reactive() 函数。