Vue3 项目的 setup 函数如何使用

在Vue3项目中，setup函数是一个新引入的Composition API的核心特性，作为组件的入口函数，它为组件的逻辑复用和代码组织提供了更灵活、更高效的方式。它允许你在单个函数中处理大部分的组件逻辑，如声明响应式变量、计算属性、侦听器等。setup函数执行时机在beforeCreate和created之间，此时组件的props已解析完成，但DOM尚未挂载。这意味着，你不能在setup中访问this上的属性和方法，因为此时的组件实例尚未完全构建。此外，setup函数返回的任何响应式状态或方法，都可以直接用于组件的模板或其他Composition API中，大大增强了其可用性和便捷性。

接下来，我们详细探讨如何具体使用setup函数增强Vue3项目的开发体验。

一、响应式状态的声明与使用

在setup函数中，可以利用ref和reactive这两个API来声明响应式状态。ref用于定义单个响应式变量，而reactive适用于定义响应式对象。

• 使用ref定义响应式变量：

  import { ref } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
      function increment() {
        count.value++;
      }
      return { count, increment };
    },
  };
  

  在此段代码中，count是一个响应式变量，其改变会触发相关组件的重新渲染。

• 使用reactive定义响应式对象：

  import { reactive } from 'vue';
  
  export default {
    setup() {
      const state = reactive({ count: 0 });
      function increment() {
        state.count++;
      }
      return { state, increment };
    },
  };
  

二、计算属性与侦听器

在setup函数中使用computed和watch来创建计算属性和侦听器。

• 利用computed创建计算属性：

  import { ref, computed } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
      const doubledCount = computed(() => count.value * 2);
      return { count, doubledCount };
    },
  };
  

• 使用watch作为侦听器使用：

  import { ref, watch } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
      watch(count, (newValue, oldValue) => {
        console.log(`count变更：${oldValue} -> ${newValue}`);
      });
      return { count };
    },
  };
  

三、生命周期钩子

在setup函数中，可以通过Vue3提供的生命周期钩子函数API，如onMounted、onUpdated和onUnmounted等，来执行相关生命周期操作。

• onMounted的使用：

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

四、深入响应式系统

Vue3的响应式系统基于Proxy实现，相对于Vue2基于Object.defineProperty的实现方式，提供了对嵌套对象更好的支持，同时也改善了数组响应式等局限性。

• Proxy使得Vue3的响应式系统更为强大和灵活，但也需要开发者注意不要滥用或在不必要的场景中使用响应式，以避免性能问题。

五、Composition API的其他功能

除了setup函数外，Vue3的Composition API还包括provide和inject用于跨组件传递数据，customRef用于创建自定义的响应式引用，watchEffect为侦听副作用等，进一步丰富了组件的逻辑复用和功能实现。

Vue3的setup函数不仅优化了代码的组织结构，提高了组件逻辑的复用性，也使得组件的功能更加丰富，对开发者而言，合理利用setup函数将大大提升开发效率和项目的可维护性。

相关问答FAQs：

Q：Vue3 的 setup 函数是用来做什么的？

A：Vue3 的 setup 函数是一个特殊的函数，用来在组件内部进行初始化操作。它接收两个参数：props 和 context，可以在其中进行数据的解构和处理。它的返回值将被用作组件模板中的数据。可以在 setup 函数内部使用 Vue 3 提供的响应式 API 来创建响应式数据。

Q：在 Vue3 中如何使用 setup 函数？

A：使用 setup 函数的方式有两种：以组合式 API 的方式使用和在单文件组件中使用。

• 组合式 API：在组件内部定义 setup 函数，并且将 props 和 context 作为参数传入。然后可以在其中进行数据解构和处理，并返回一个对象，该对象的属性将被用作组件模板中的数据。

• 在单文件组件中使用：在单文件组件的 <script> 标签中，使用 setup() 函数来定义组件的初始化逻辑。同样可以在其中进行数据解构和处理，并返回一个对象作为组件模板中的数据。

Q：在 Vue3 的 setup 函数中可以做哪些操作？

A：在 Vue3 的 setup 函数中，可以进行以下操作：

• 解构 props：使用解构赋值将 props 中的数据解构到 setup 函数中，从而在组件中使用解构后的数据。

• 创建响应式数据：使用 Vue 3 提供的 reactive()、ref()、computed() 等函数来创建响应式数据。响应式数据可以实时追踪数据的变化，并在模板中进行展示。

• 调用其他函数：可以在 setup 函数中调用其他函数，用于处理数据、请求接口等操作。

• 返回数据：使用 return 关键字将处理后的数据返回，这些数据将被用于组件模板中的渲染。返回的数据可以是一个对象，也可以是一个数组。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。