12.2 setup()函数-Vue.js从入门到精通(三)

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

### 12.2 `setup()` 函数：Vue 3 组件的核心舞台

在Vue 3中，`setup()`函数是组件内使用Composition API的入口点，它标志着Vue组件开发方式的一次重大变革。相比Vue 2的Options API，Composition API通过`setup()`函数提供了一种更加灵活、逻辑复用的方式来组织组件代码。在本章中，我们将深入探讨`setup()`函数的各个方面，包括其基础用法、生命周期钩子、响应式引用、计算属性、侦听器和组件通信等。

#### 12.2.1 `setup()`函数基础

`setup()`函数是组件中所有Composition API调用的起点。它在组件被创建之前被调用，并且是`beforeCreate`和`created`生命周期钩子之前被调用的唯一生命周期函数。`setup()`函数接收两个参数：`props`和`context`。

- **props**：一个包含组件外部传入的所有props的对象。这个对象在组件内部是响应式的，但你不能解构它，否则将失去响应性。
- **context**：一个普通的JavaScript对象，提供了组件实例上的属性如`attrs`、`slots`、`emit`等。这允许你在`setup()`函数内部访问这些属性和方法。

```javascript
<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

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

function increment() {
      count.value++;
      emit('update:count', count.value);
    }

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

在上面的例子中，`setup()`函数接收了`props`并基于`initialCount` prop创建了一个响应式的`count`引用。然后，定义了一个`increment`函数来更新`count`的值，并通过`emit`方法触发一个自定义事件。最后，通过返回对象，使得`count`和`increment`在模板中可用。

#### 12.2.2 响应式引用与计算属性

在`setup()`函数中，我们经常使用`ref`和`reactive`来创建响应式状态。`ref`用于基本数据类型，而`reactive`用于对象或数组。

- **ref**：通过`ref`创建的响应式数据是一个对象，该对象包含一个`.value`属性来存储实际的值。
- **reactive**：`reactive`允许你直接以响应式方式操作对象或数组，无需`.value`属性。

```javascript
import { ref, reactive, computed } from 'vue';

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

const fullName = computed(() => {
    return `${user.name} ${user.surname || ''}`;
  });

return {
    count,
    user,
    fullName
  };
}
```

在上面的代码中，我们还使用了`computed`来创建一个计算属性`fullName`，它基于`user`对象动态生成全名。计算属性是基于它们的依赖进行缓存的，只有当依赖项发生变化时才会重新计算。

#### 12.2.3 侦听器与副作用

在Vue 3中，侦听器通过`watch`和`watchEffect`函数实现，它们在`setup()`函数中广泛使用来观察响应式数据的变化并执行副作用。

- **watch**：允许你侦听一个或多个响应式引用或getter函数，并在它们变化时执行回调函数。你可以选择是否深度侦听对象或数组内部的变化。
- **watchEffect**：在响应式数据变化时自动重新运行，不需要明确指定依赖项。它更适合于执行自动重新运行的副作用。

```javascript
import { ref, watch, watchEffect } from 'vue';

setup() {
  const count = ref(0);

watchEffect(() => {
    console.log(`count is: ${count.value}`);
  });

watch(count, (newValue, oldValue) => {
    console.log(`count changed from ${oldValue} to ${newValue}`);
  }, { immediate: true, deep: false });

return {
    count
  };
}
```

#### 12.2.4 生命周期钩子

虽然`setup()`函数替代了Vue 2中的`beforeCreate`和`created`生命周期钩子，但你仍然可以在`setup()`函数内部通过`onMounted`、`onUpdated`等Composition API提供的生命周期钩子来访问组件的生命周期。

```javascript
import { onMounted, onUpdated, ref } from 'vue';

setup() {
  const count = ref(0);

onMounted(() => {
    console.log('Component is mounted!');
  });

onUpdated(() => {
    console.log('Component updated!');
  });

return {
    count
  };
}
```

#### 12.2.5 组件通信

在`setup()`函数中，组件间的通信主要通过`props`、`emit`以及`provide`/`inject`实现。前面已经展示了如何使用`props`和`emit`，这里简要介绍`provide`/`inject`。

- **provide**：允许你指定你想要提供给后代组件的数据/方法。
- **inject**：允许一个组件接收来自祖先组件或整个应用的数据/方法。

```javascript
// 祖先组件
setup() {
  const theme = ref('dark');

provide('theme', theme);

return {};
}

// 后代组件
setup() {
  const theme = inject('theme');

return {
    theme
  };
}
```

#### 12.2.6 总结

`setup()`函数作为Vue 3中Composition API的核心，为开发者提供了一种全新的、更灵活的方式来组织和复用Vue组件的逻辑。通过`setup()`函数，我们可以更方便地利用响应式引用、计算属性、侦听器、生命周期钩子和组件通信等特性，从而编写出更加清晰、高效和可维护的Vue组件。掌握`setup()`函数及其相关API的使用，是深入学习Vue 3和Composition API的关键。

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

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

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

Vue3技术解密

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

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

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

移动端开发指南

Vue原理与源码解析

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

Vue面试指南

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

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