Vue.js `setup()` 函数的使用

Vue.js setup() 函数的使用

今天我们来聊聊 Vue 3 中的 setup() 函数。如果你正在使用 Vue 3，那么对 setup() 函数的理解和掌握将对你的开发工作大有裨益。

什么是 setup() 函数？

setup() 函数是 Vue 3 组合式 API（Composition API）的核心。它是组件中用于处理逻辑的入口函数，在组件实例创建之前执行。在 setup() 中，你可以定义响应式状态、计算属性、方法，以及使用生命周期钩子等。

setup() 函数的参数

setup() 函数接收两个参数：props 和 context。

1. props：这是一个包含传递给组件的所有属性的对象。需要注意的是，props 是响应式的，当父组件传递的属性发生变化时，props 会自动更新。然而，直接解构 props 会导致其失去响应性。如果需要解构，可以使用 toRefs 或 toRef。

   import { toRefs } from 'vue';
   
   export default {
     props: {
       title: String,
     },
     setup(props) {
       const { title } = toRefs(props);
       console.log(title.value);
     },
   };
   

2. context：这是一个包含组件上下文的对象，包含以下属性：

   • attrs：非响应式对象，包含传递给组件但未被声明为 props 的属性。
   • slots：非响应式对象，包含传递给组件的插槽内容。
   • emit：用于触发事件的方法。

   export default {
     setup(props, context) {
       const { attrs, slots, emit } = context;
       console.log(attrs);
       console.log(slots);
       emit('customEvent');
     },
   };
   

在模板中使用 setup() 返回的值

如果 setup() 返回一个对象，那么该对象的属性将被合并到组件的渲染上下文中，可以直接在模板中使用。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment,
    };
  },
};
</script>

在上述示例中，setup() 返回了一个包含 count 和 increment 的对象，因此它们可以直接在模板中使用。

使用生命周期钩子

在 setup() 中，Vue 3 提供了组合式 API 的生命周期钩子函数，例如 onMounted、onUpdated 和 onUnmounted。

import { onMounted } from 'vue';

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

需要注意的是，这些生命周期钩子函数必须在 setup() 内部调用。

注意事项

• this 的使用：在 setup() 中，this 不会指向组件实例，因此无法通过 this 访问组件的属性或方法。如果需要访问组件的属性或方法，应通过 props 和 context 参数。
• 与 Options API 的关系：虽然组合式 API 提供了更灵活的方式来组织组件逻辑，但它并不是完全取代 Options API。在一些简单的组件中，使用 Options API 可能更为直观。你可以根据项目需求选择使用哪种 API。

总结
setup() 函数是 Vue 3 组合式 API 的核心，为我们提供了一种更灵活、高效的方式来组织和复用组件逻辑。通过掌握 setup() 的使用，你可以更轻松地管理组件的状态和行为，提高代码的可维护性和可读性。