10.3.1 关于setup方法 -TypeScript和Vue从入门到精通(三)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(三)

### 10.3.1 关于`setup`方法

在Vue 3中，`setup`函数是Composition API的核心入口点，它提供了一个全新的组件逻辑编写方式，使得状态管理、逻辑复用以及类型推导等方面变得更加灵活和强大。本章节将深入解析`setup`方法的各个方面，包括其基本概念、用法、生命周期钩子集成、响应式状态管理以及与其他Composition API的协同工作。

#### 10.3.1.1 `setup`方法基础

`setup`函数是组件内使用Composition API的起点。它是组件创建过程中最早被调用的函数之一（在`beforeCreate`和`created`生命周期钩子之前），且它是唯一一个在`this`上下文不是组件实例的函数。这意味着在`setup`内部，你不能直接通过`this`来访问组件实例的属性和方法。

`setup`函数接受两个参数：

- `props`：一个包含组件外部传入的所有`props`的响应式对象。
- `context`：一个普通JavaScript对象，包含了`attrs`（非`props`的Attributes）、`slots`（插槽）、`emit`（触发事件的方法）等。

```typescript
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    title: String
  },
  setup(props, { attrs, slots, emit }) {
    // 使用props, attrs, slots, emit
    console.log(props.title);

// 逻辑代码...

return {
      // 需要暴露给模板的响应式状态或方法
    };
  }
});
```

#### 10.3.1.2 响应式状态管理

在`setup`中，我们通常会使用Composition API中的`reactive`、`ref`等函数来创建响应式状态。这些状态能够自动地跟踪其依赖，并在变化时通知视图进行更新。

- **`ref`**：用于处理基本数据类型的响应式。
- **`reactive`**：用于处理对象或数组的响应式。

```typescript
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const user = reactive({
      name: 'Alice',
      age: 30
    });

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

function updateName(newName: string) {
      user.name = newName;
    }

return {
      count,
      user,
      increment,
      updateName
    };
  }
});
```

#### 10.3.1.3 生命周期钩子在`setup`中的使用

Vue 3提供了`onMounted`、`onUpdated`、`onUnmounted`等Composition API版本的生命周期钩子，允许我们在`setup`函数内部以函数的形式使用这些钩子。

```typescript
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';

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

onMounted(() => {
      console.log('Component is mounted!');
      // 执行一些初始化操作
    });

onUnmounted(() => {
      console.log('Component is unmounted!');
      // 执行清理操作，如移除定时器、取消订阅等
    });

return {
      count
    };
  }
});
```

#### 10.3.1.4 `setup`中的计算属性与监听器

在`setup`中，我们可以使用`computed`和`watch`/`watchEffect`来创建计算属性和监听器。

- **`computed`**：用于创建计算属性，基于它们的响应式依赖进行缓存。
- **`watch`/`watchEffect`**：用于监听响应式数据的变化，并执行副作用。

```typescript
import { defineComponent, ref, computed, watch, watchEffect } from 'vue';

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

watchEffect(() => {
      console.log(`Count is: ${count.value}`);
      // 这段代码会在组件渲染时立即执行，
      // 以及`count`变化时重新执行
    });

watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
      // 这段代码仅在`count`变化时执行
    });

return {
      count,
      doubleCount
    };
  }
});
```

#### 10.3.1.5 `setup`与模板的交互

`setup`函数返回的对象中的所有属性都将被暴露给模板，这使得我们可以在模板中直接使用这些响应式状态和方法。同时，由于`setup`中没有`this`，因此无法通过传统方式访问组件实例上的属性或方法。但可以通过`context`参数中的`attrs`、`slots`、`emit`来与模板进行更高级的交互。

```vue
<template>
  <div>
    <h1>{{ user.name }}</h1>
    <button @click="increment">Increment</button>
    <slot name="custom-slot"></slot>
  </div>
</template>

export default defineComponent({
  setup() {
    const user = reactive({ name: 'Alice' });
    const count = ref(0);

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

return {
      user,
      count,
      increment
    };
  }
});
</script>
```

#### 10.3.1.6 总结

`setup`方法是Vue 3中Composition API的核心，它提供了一种全新的、更灵活的组件逻辑编写方式。通过`setup`，我们可以更细粒度地控制组件的响应式状态、生命周期钩子、计算属性、监听器等，同时也使得逻辑复用和类型推导变得更加容易。然而，由于`setup`的特殊性（如没有`this`上下文），我们需要适应新的编程模式，包括如何正确地暴露状态和方法给模板，以及如何利用`context`参数与模板进行交互。通过深入学习和实践`setup`方法，我们可以更加高效地开发Vue 3应用，提升开发效率和代码质量。

该分类下的相关小册推荐：

VUE组件基础与实战

TypeScript和Vue从入门到精通(二)

Vue.js从入门到精通(一)

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(五)

TypeScript和Vue从入门到精通(四)

Vue面试指南

Vue.js从入门到精通(四)

TypeScript和Vue从入门到精通(一)

vuejs组件实例与底层原理精讲

vue项目构建基础入门与实战

Vue原理与源码解析