vue3为什么使用setup • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue3引入了一个新的编写组件的选项——setup，来替代 Vue2 中的 data、computed、methods等属性。使用setup的主要目的是为了更好地支持 Composition API。

一、Composition API
Composition API 是 Vue3 中一个全新的API，它的出现是为了解决 Vue2 中代码组织不够灵活的问题。它允许我们使用函数编写组件逻辑，并将相关逻辑组织在一起，而不仅仅局限于data、computed、methods等属性。

使用 Composition API 写组件有以下优势：

逻辑复用更容易：可以将相关逻辑提取成函数，通过函数复用来避免代码冗余。
逻辑组织更清晰：将相关逻辑放在一个函数内部，使得代码更易读、易于维护。
更好的类型推导：由于 Composition API 是基于函数的，可以更准确地通过类型推导推断出变量的类型，增强了代码的健壮性。

二、为什么使用 setup

与新的 Composition API 配合更佳：setup选项为 Composition API 提供了一个入口，通过这个入口可以编写组件的逻辑，并返回给模板使用。使用setup可以让开发者更好地利用 Composition API 的优势。
更直观的代码组织：通过将相关逻辑放在一个函数内部，使得代码更易读、易于维护，并且可以更容易地对逻辑进行复用。
更好的性能：Vue3使用 Proxy 来实现数据的响应式，而setup函数返回的对象将会被注入到 render 函数中，这样可以避免了重复创建响应式对象，提高了性能。

三、setup的使用方式
在setup函数中可以完成以下操作：

创建响应式数据：通过调用ref或reactive函数可以创建响应式数据。
定义计算属性：通过computed函数可以创建计算属性。
添加通用方法：可以将通用的方法定义在setup函数中，通过return返回，然后在模板中使用。

示例代码：

import { ref, computed } from 'vue';

export default {
  setup() {
    // 创建响应式数据
    const count = ref(0);
    
    // 定义计算属性
    const doubleCount = computed(() => count.value * 2);
    
    // 添加通用方法
    function increment() {
      count.value++;
    }
    
    // 返回需要在模板中使用的内容
    return {
      count,
      doubleCount,
      increment
    };
  }
}

总而言之，使用setup可以更好地利用 Composition API 的优势，让代码更直观、清晰，提高性能和可维护性，是Vue3推荐的开发方式。

1年前 0条评论

worktile

Worktile官方账号

Vue 3 引入了一个新的函数式组件 API，即 setup 函数。使用 setup 函数的主要目的是为了更好地支持 TypeScript 类型推断和更好地分离组件的逻辑。

以下是为什么 Vue 3 使用 setup 函数的几个原因：

更好的类型推断：在 Vue 2 中，由于 Vue 组件定义的选项是在组件实例化之前进行处理的，所以很难对选项进行准确的类型推断。而 Vue 3 中通过使用 setup 函数，可以在组件实例化之前进行处理，并将返回的对象用于确定组件选项的类型。这使得 TypeScript 可以更好地推断组件的类型，提供更好的自动补全和错误检查。
更好的组合逻辑：使用 setup 函数可以更好地分离组件的逻辑。在 Vue 2 中，组件选项如 data、computed、methods 等被混在一起，不易于维护和复用。而在 Vue 3 中，可以在 setup 函数中将这些逻辑分离开来，使代码更清晰和可组合。
更好的代码重用：使用 setup 函数可以更好地实现代码重用。在 Vue 3 中，可以将 setup 函数抽离为一个独立的函数，并在多个组件中进行复用。这种方式可以提高代码的可重用性和可维护性。
更好的性能：由于 setup 函数是在组件实例化之前进行处理的，所以可以更好地优化组件的性能。Vue 3 可以在编译时对 setup 函数进行静态分析，提前优化函数调用的方式，减少运行时的开销。
更好的可测试性：使用 setup 函数可以更好地进行组件的单元测试。由于 setup 函数是一个独立的函数，可以更容易地对其进行测试，并验证其行为是否符合预期。

总之，使用 setup 函数可以提供更好的类型推断、更好的组合逻辑、更好的代码重用、更好的性能和更好的可测试性。这些优点使得 setup 函数成为 Vue 3 中定义组件的首选方式。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

为了更好地了解为什么Vue 3引入了setup，我们需要先了解Vue 3中的Composition API。

Vue 3中引入的Composition API旨在解决在Vue 2中组件逻辑复用的问题。在Vue 2中，我们可能会使用mixin、mixins、extend等方式来实现组件逻辑的复用，但这些方法在使用上有些限制，并且容易导致代码的混乱。

在Vue 3中，使用Composition API，我们可以更好地组织和管理组件的逻辑。而setup函数就是Composition API的入口。

setup函数是在组件初始化阶段执行的，它接收两个参数：props和ctx。

props：组件接收到的props的响应式引用；
ctx：一个包含了组件属性和方法的上下文对象。

setup函数返回一个包含render函数和其他属性的对象。在这个函数中，我们可以定义响应式数据、计算属性、方法等。

在使用setup函数的过程中，我们可以享受到以下好处：

1、更灵活的组件逻辑复用：

使用setup函数，我们可以更好地组织和复用组件的逻辑。我们可以根据需要将组件的不同逻辑划分为不同的函数，并在setup函数中调用这些函数。这样，我们可以更好地复用这些逻辑，而不是通过mixin、mixins等方式。

2、更容易理解和维护的代码结构：

使用setup函数，我们可以将组件的属性、计算属性和方法都定义在一个地方，方便理解和维护。不再出现代码散落在组件的不同生命周期钩子函数中的情况。

3、更好地控制组件生命周期：

在setup函数中，我们可以手动控制组件的生命周期。通过返回不同的生命周期钩子函数，我们可以在需要的时候执行自己定义的逻辑。

4、更好的类型推断支持：

使用setup函数，我们可以获得更好的类型推断支持。Vue 3中使用了新的TypeScript语法，可以更准确地推断组件的类型。

总之，setup函数是Vue 3中使用Composition API的入口。通过setup函数，我们可以更好地组织和复用组件的逻辑，使代码结构更清晰，更易于理解和维护。

1年前 0条评论