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 前端应用中有效地处理异步操作，提高应用的响应性和用户体验。