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