Vue.js前端框架教程3：Vue setup语法糖和异步操作

文章目录

• • • • [script setup](#script setup)
      • • 基本语法
        • [使用 Composition API](#使用 Composition API)
        • 组件定义
        • 使用生命周期钩子
        • 模板引用
        • [使用 `defineProps` 和 `defineEmits`](#使用 defineProps 和 defineEmits)
        • [组合多个 `<script setup>` 标签](#组合多个 <script setup> 标签)
      • Vue异步操作
      • • [1. 使用 `async` 和 `await`](#1. 使用 async 和 await)
        • [2. 使用 Promise](#2. 使用 Promise)
        • [3. 在 `created` 或 `mounted` 钩子中执行异步操作](#3. 在 created 或 mounted 钩子中执行异步操作)
        • [4. 使用 `watch` 或 `watchEffect` 监听数据变化](#4. 使用 watch 或 watchEffect 监听数据变化)
        • [5. 使用 Composition API 的 `useAsync`](#5. 使用 Composition API 的 useAsync)

script setup

<script setup> 是 Vue 3 中引入的一种新的组件语法糖，它提供了一种更简洁和更少样板代码的方式来编写组件。使用 <script setup>，你可以直接在 <script> 标签中使用 setup 函数中的代码，而不需要显式地定义 setup 函数。这种方式使得组件的逻辑更加集中和清晰。

以下是 <script setup> 的基本用法：

基本语法

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

const count = ref(0);

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

<template>
  <button @click="increment">{{ count }}</button>
</template>

在这个例子中，count 是一个响应式引用，increment 是一个方法，它们都可以直接在模板中使用，无需在 setup 函数中返回。

使用 Composition API

<script setup> 与 Vue 3 的 Composition API 配合得非常好，你可以轻松地使用 ref、reactive、computed 等响应式 API。

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

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

<template>
  <p>{{ fullName }}</p>
</template>

组件定义

在 <script setup> 中，你也可以定义组件，并且它们会自动注册到当前组件中。

<script setup>
import MyComponent from './MyComponent.vue';
</script>

<template>
  <my-component />
</template>

使用生命周期钩子

<script setup> 也支持生命周期钩子，如 onMounted、onUpdated 等。

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

onMounted(() => {
  console.log('组件已挂载');
});
</script>

模板引用

在 <script setup> 中，模板引用（如 ref 定义的响应式变量）可以直接在模板中使用。

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

const inputRef = ref(null);
</script>

<template>
  <input :value="inputRef" @input="inputRef = $event.target.value" />
</template>

使用 defineProps 和 defineEmits

对于 props 和 emits，<script setup> 提供了 defineProps 和 defineEmits 宏，使得定义更加简洁。

<script setup>
const props = defineProps(['title']);
const emit = defineEmits(['update']);
</script>

<template>
  <button @click="emit('update', props.title)">更新标题</button>
</template>

组合多个 <script setup> 标签

如果你的组件非常大，你可以将逻辑分割到多个 <script setup> 标签中。

<script setup>
// Part 1: Feature A
import { ref } from 'vue';
const featureA = ref(0);
</script>

<script setup>
// Part 2: Feature B
import { computed } from 'vue';
const featureB = computed(() => `Feature B: ${featureA.value}`);
</script>

<template>
  <div>{{ featureB }}</div>
</template>

<script setup> 是 Vue 3 中一个非常强大的特性，它使得组件的编写更加简洁和模块化，同时也提高了开发效率。

Vue异步操作

在 Vue 前端框架中，异步操作通常是必不可少的，尤其是在处理网络请求、定时任务、延迟操作等场景。Vue 提供了几种处理异步操作的方法，以下是一些常见的异步处理方式：

1. 使用 async 和 await

Vue 支持在组件的方法中使用 async 和 await 语法，这使得异步代码的编写更加直观和易于理解。

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    async handleClick() {
      try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('请求失败:', error);
      }
    }
  }
}
</script>

2. 使用 Promise

在 Vue 中，你可以使用 Promise 来处理异步操作，并通过 .then() 和 .catch() 方法来处理成功和失败的情况。

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      fetch('/api/data')
        .then(response => response.json())
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.error('请求失败:', error);
        });
    }
  }
}
</script>

3. 在 created 或 mounted 钩子中执行异步操作

在 Vue 组件的生命周期钩子中，你可以执行异步操作，例如在组件创建后或挂载后立即获取数据。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        this.message = data.message;
      })
      .catch(error => {
        console.error('请求失败:', error);
      });
  }
}
</script>

4. 使用 watch 或 watchEffect 监听数据变化

在 Vue 3 中，watch 和 watchEffect 是响应式 API，可以用来监听数据的变化，并在变化时执行异步操作。

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

const data = ref(null);

watch(data, async (newValue, oldValue) => {
  if (newValue !== oldValue) {
    const response = await fetch(`/api/data/${newValue}`);
    const result = await response.json();
    console.log(result);
  }
});
</script>

5. 使用 Composition API 的 useAsync

在 Vue 3 中，你可以使用 Composition API 提供的 useAsync 组合函数来处理异步操作，这使得代码更加模块化和可重用。

<script setup>
import { ref, computed } from 'vue';
import { useAsync } from '@vueuse/core';

const fetchData = (id) => fetch(`/api/data/${id}`).then(res => res.json());

const { result, error, loading } = useAsync(() => fetchData(1), { immediate: true });

console.log(result, error, loading);
</script>

这些方法可以帮助你在 Vue 前端应用中有效地处理异步操作，提高应用的响应性和用户体验。