深入理解Vue 3的Composition API和＜script setup＞语法糖

引言

Vue 3引入了Composition API，这是一个全新的API，旨在解决大型组件中逻辑复用和代码组织的问题。同时，Vue 3还引入了<script setup>语法糖，使得使用Composition API更加简洁和直观。本文将深入探讨Composition API和<script setup>的核心概念，并通过实际代码示例展示它们的使用方法。

1. 什么是Composition API？

Composition API是一组基于函数的API，允许我们在Vue组件中更灵活地组织和复用逻辑。它提供了一种替代Options API的方式，使得代码更加模块化和可维护。

2. 使用`<script setup>`语法糖

<script setup>是Vue 3.2引入的一种语法糖，它使得在单文件组件（SFC）中使用Composition API更加简洁。所有在<script setup>中定义的变量和函数都会自动暴露给模板使用。

示例代码：

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

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

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

在这个示例中，我们使用ref函数创建了一个响应式的count变量，并定义了一个increment方法。由于使用了<script setup>，我们不需要显式地返回这些变量和方法，它们会自动暴露给模板使用。

3. 使用reactive创建响应式对象

除了ref，我们还可以使用reactive函数创建更复杂的响应式对象。

示例代码：

<template>
  <div>
    <p>用户信息：</p>
    <p>姓名：{{ user.name }}</p>
    <p>年龄：{{ user.age }}</p>
    <button @click="incrementAge">增加年龄</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const user = reactive({
  name: '张三',
  age: 25
});

const incrementAge = () => {
  user.age++;
};
</script>

在这个示例中，我们使用reactive函数创建了一个包含用户信息的响应式对象user，并定义了一个incrementAge方法来更新用户的年龄。

4. 使用computed计算属性

computed函数用于创建计算属性，它们会根据依赖的响应式数据自动更新。

示例代码：

<template>
  <div>
    <p>原始价格：{{ price }}</p>
    <p>折扣价格：{{ discountedPrice }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const price = ref(100);
const discount = ref(0.1);

const discountedPrice = computed(() => {
  return price.value * (1 - discount.value);
});
</script>

在这个示例中，我们使用computed函数创建了一个计算属性discountedPrice，它根据price和discount的值自动计算折扣后的价格。

5. 使用watch监听响应式数据

watch函数用于监听响应式数据的变化，并在数据变化时执行特定的操作。

示例代码：

<template>
  <div>
    <input v-model="searchTerm" placeholder="搜索..." />
    <p>搜索结果：{{ searchResults }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const searchTerm = ref('');
const searchResults = ref('');

watch(searchTerm.value, (newTerm) => {
  searchResults.value = `搜索结果为：${newTerm}`;
});
</script>

在这个示例中，我们使用watch函数监听searchTerm的变化，并在searchTerm变化时更新searchResults。

6. 使用自定义Hooks复用逻辑

自定义Hooks是指使用Composition API创建的可复用函数，用于封装和复用组件逻辑。

示例代码：

<template>
  <div>
    <p>窗口宽度：{{ width }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

function useWindowWidth() {
  const width = ref(window.innerWidth);

  const updateWidth = () => {
    width.value = window.innerWidth;
  };

  onMounted(() => {
    window.addEventListener('resize', updateWidth);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', updateWidth);
  });

  return { width };
}

const { width } = useWindowWidth();
</script>

在这个示例中，我们创建了一个自定义Hook useWindowWidth，用于监听窗口宽度的变化，并在组件中使用它。

结论

Vue 3的Composition API和<script setup>语法糖为我们提供了一种全新的方式来组织和复用组件逻辑，使得代码更加模块化和可维护。通过ref、reactive、computed、watch和自定义Hooks等API，我们可以轻松地在Vue组件中实现复杂的功能。

参考资料

Composition API FAQ | Vue.js

API Reference | Vue.js