首页 前端知识 【2024最新】vue3的基本使用(超详细)

【2024最新】vue3的基本使用(超详细)

2024-05-29 10:05:39 前端知识 前端哥 608 950 我要收藏

一、Vue 3 概述

1. 为什么要学习Vue 3

Vue 3是Vue.js的最新主要版本,它带来了许多改进和新特性,包括但不限于:

  • 性能提升:Vue 3提供了更快的渲染速度和更低的内存使用率。
  • Composition API:引入了一个新的API,允许更灵活的代码组织和复用,特别适合构建大型应用。
  • 更好的TypeScript支持:Vue 3从头开始就考虑了TypeScript的支持,使得使用TypeScript开发Vue应用更加顺畅。
  • 更小的体积:通过优化和树摇(tree-shaking),Vue 3的体积更小,使得加载时间更短。

学习Vue 3可以让你利用最新的Web开发技术构建高效、可维护的前端应用。

2. Vue 3的新变化

Vue 3带来了很多重要的新变化,包括:

  • Composition API:提供了一种新的方式来组织组件的逻辑,使得功能更容易被提取和复用。
  • 响应式系统的重写:使用Proxy对象重写了响应性系统,提高了性能并减少了内存占用。
  • 片段(Fragments):组件可以有多个根节点,而不再限于单一根节点。
  • Teleport组件:允许将子节点渲染到DOM树的其他位置。
  • Suspense组件:提供了一种新的方式来处理异步组件的加载状态。
3. 破坏性语法的更新

Vue 3也引入了一些破坏性更新,以提高性能和开发体验,比如:

  • 废除了一些不再推荐使用的API,如Vue.extendVue.mixin等。
  • EventBus的使用方式发生了变化,推荐使用提供/注入(provide/inject)模式或是Vuex来进行全局状态管理。

接下来,让我们用一个简单的示例开始Vue 3的旅程:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 3 Hello World</title>
</head>
<body>
<div id="app">{{ message }}</div>

<script src="https://unpkg.com/vue@3.4.0"></script>
<script>
  const { createApp } = Vue;
  
  createApp({
    data() {
      return {
        message: 'Hello Vue 3!'
      }
    }
  }).mount('#app');
</script>
</body>
</html>

这个示例创建了一个最基本的Vue 3应用,展示了如何使用createApp方法创建一个新的Vue应用,并将其挂载到页面上的指定元素。

二、Vue 3 开发环境搭建

搭建Vue 3开发环境是开始学习和开发Vue 3应用的第一步。这一部分将引导你如何创建Vue 3项目,并简要介绍项目结构的变化。

1. 创建Vue 3项目

Vue 3项目可以通过Vue CLI或Vite这两种方式创建。Vue CLI是Vue的官方命令行工具,而Vite是一个现代化的前端构建工具,提供了更快的开发服务器启动和热重载。

使用Vue CLI创建项目:

首先,确保你安装了最新版的Vue CLI。如果尚未安装,可以通过npm安装:

npm install -g @vue/cli

然后,创建一个新的Vue 3项目:

vue create my-vue-app

在创建过程中,CLI会让你选择预设配置。为了使用Vue 3,你可以选择“Manually select features”来自定义功能,确保选择了“Vue 3”选项。

使用Vite创建项目:

Vite是一个建立在现代Web标准之上的新一代前端构建工具。使用Vite创建Vue 3项目,可以获得极速的服务启动和模块热更新。安装Vite并创建一个新项目:

npm init vite@latest my-vue-app -- --template vue

接下来,进入项目目录并安装依赖:

cd my-vue-app
npm install
2. 创建Vue 2和Vue 3项目的文件变化

Vue 3项目的文件结构在大体上保持了与Vue 2类似的结构,但也有一些关键的变化和改进:

  • main.js:Vue 3使用createApp函数来创建一个Vue应用实例,而Vue 2使用new Vue()构造函数。
  • 单文件组件(.vue文件):在Vue 3中,<script setup>语法糖允许更简洁的组合式API代码,使得组件的编写更加高效。
3. Vue 3中的App单文件不再强制要求必须有根元素

在Vue 2中,每个单文件组件(.vue文件)必须有一个单独的根元素。而在Vue 3中,这一限制被取消,允许组件有多个根元素,这为组件的布局提供了更大的灵活性。

示例代码:创建Vue 3项目

以下是一个简单的Vue 3项目的main.js示例,演示了如何使用createApp来创建一个Vue应用:

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

这里,App.vue是根组件,它可以是这样的:

<template>
  <div>Hello Vue 3!</div>
  <div>This is a multi-root component!</div>
</template>

<script>
export default {
  name: 'App'
}
</script>

三、组合式API(Composition API)和选项式API(Options API)

Vue 3引入了一个新的API——组合式API(Composition API),这是一个重大的创新,旨在解决在使用Vue 2中的选项式API(Options API)时遇到的一些限制,尤其是在处理大型和复杂组件时。我们来看看这两种API的主要差异和它们的应用场景。

选项式API(Options API)

在Vue 2中,我们主要通过选项式API来组织组件的代码,比如data, methods, props, computed, watch等选项。这种方式很直观,因为它将不同类型的组件选项分门别类地组织起来。

<template>
  <div>{{ fullName }}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'Jane',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>
组合式API(Composition API)

Vue 3的组合式API提供了一种更灵活的组织组件逻辑的方式。它通过setup()函数允许你将相关功能组织在一起,而不是基于选项类型分开。这使得代码重用和逻辑提取变得更加简单,尤其是在构建复杂组件时。

<template>
  <div>{{ fullName }}</div>
</template>

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

export default {
  setup() {
    const firstName = ref('Jane');
    const lastName = ref('Doe');
    const fullName = computed(() => firstName.value + ' ' + lastName.value);

    return { fullName };
  }
}
</script>
API比较
  • 代码组织:组合式API使得按逻辑组织代码变得更加容易,特别是在处理复杂组件时,可以将相关的逻辑放在一起,而不是分散在不同的选项中。
  • 类型推断:组合式API提供了更好的TypeScript集成,因为它能够利用TypeScript的类型推断,使得在使用TypeScript开发Vue应用时更加顺畅。
  • 代码复用:通过组合式API,可以更容易地将组件逻辑抽取到可复用的函数中,这对于保持代码的干净和维护性是非常有帮助的。
示例代码:使用Composition API
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

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

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }

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

这个例子展示了如何使用ref来创建一个响应式的计数器,以及如何将逻辑(如增加计数)组织在setup函数中。

组合式API和选项式API各有优势,Vue 3提供了这两种API,以便开发者可以根据具体项目和个人偏好选择最适合的方式。

四、组合式API(Composition API)

Vue 3的组合式API是一组基于函数的API,让你能够更灵活地组织和重用组件逻辑。通过组合式API,你可以更容易地将组件逻辑按功能组织,而不是分散在不同的Vue选项中。下面我们来详细看看组合式API的核心特性。

1. setup函数

setup函数是组合式API的入口点,它在组件创建之前执行,此时组件的props已经解析完成。你可以在这个函数里定义响应式状态、计算属性和函数,然后返回它们,使其在模板中可用。

示例代码:

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

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

export default {
  setup() {
    const message = ref('Hello Vue 3!');

    // 返回的对象中的属性和函数在模板中可用
    return { message };
  }
}
</script>

在这个例子中,我们使用ref函数创建了一个响应式的数据message,并在模板中使用它。

2. 生命周期钩子

在组合式API中,你可以使用特定的函数来访问组件的生命周期钩子,这些函数名称以on开头,例如onMountedonUpdatedonUnmounted等。

示例代码:

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

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

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

    return { count };
  }
}
</script>

这个例子展示了如何在组件挂载完成后使用onMounted生命周期钩子。

组合式API的优势在于它提供了更大的灵活性和逻辑复用的能力。使用setup函数,你可以按照逻辑而不是选项类型来组织代码,这在管理大型或复杂组件时特别有用。同时,通过直接使用生命周期钩子的函数,你可以更直接地控制组件的行为。

接下来,我们将探讨组合式API中的响应式引用(ref)和响应式对象(reactive),这两个是组合式API中最常用的响应式状态管理工具。

五、响应式Ref函数

在Vue 3的组合式API中,ref函数用于创建一个响应式的引用对象。这个对象内部有一个.value属性,通过这个属性可以获取或设置该引用的值。ref是处理基本数据类型(如字符串、数字、布尔值)的响应式状态时非常有用的工具。

1. 不使用ref函数

在不使用ref的情况下,如果你尝试直接在setup函数内使用基本类型的数据,那么这些数据不会是响应式的。这意味着当数据变化时,视图不会自动更新。

let count = 0; // 这不是响应式的
2. 使用ref函数

使用ref可以让基本数据类型变成响应式的。这是因为ref返回的是一个响应式对象,我们通过操作这个对象的.value属性来读写实际的值。

示例代码:

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

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

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

    function increment() {
      count.value++;
    }

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

在这个示例中,count是通过ref创建的响应式引用。我们在模板中直接使用count而不是count.value,Vue内部会自动处理这些引用。但是在JavaScript逻辑中,我们通过count.value来读写这个值。

3. ref引用

ref不仅可以用于基本数据类型,也可以用于引用类型数据(如对象或数组)。当用于引用类型时,Vue会递归地将这些数据转换为响应式数据。

示例代码:

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

export default {
  setup() {
    const state = ref({
      count: 0,
      message: "Hello"
    });

    function increment() {
      state.value.count++;
    }

    return { state, increment };
  }
}
</script>

在这个例子中,state是一个包含多个属性的对象。通过ref创建的响应式引用,我们可以保持对这个对象内部属性的响应式更新。

通过使用ref,Vue 3的组合式API使状态管理变得简单而直接,无论是基本数据类型还是引用类型数据。ref是构建响应式数据的基础,是理解和使用Vue 3必须掌握的概念之一。

接下来,我们将讨论reactive函数,它是另一个在Vue 3中管理响应式状态的重要工具,特别适用于复杂的对象。

六、Reactive函数

在Vue 3的组合式API中,除了ref之外,reactive函数是另一个核心功能,用于创建响应式的复杂数据结构,如对象或数组。reactive提供了一种更自然的方式来处理对象和数组,使其成为响应式数据,而无需使用.value属性进行访问。

使用reactive函数

reactive接收一个普通对象并返回该对象的响应式代理。与ref不同,当你修改使用reactive创建的对象的属性时,不需要使用.value

示例代码:

<template>
  <div>{{ state.count }}</div>
  <button @click="increment">Increment</button>
</template>

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

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    function increment() {
      state.count++;
    }

    return { state, increment };
  }
}
</script>

在这个例子中,我们创建了一个响应式对象state,并在模板中直接使用了它的属性。这比使用ref更加直接,尤其是在处理复杂对象时。

对比refreactive
  • 基本类型ref适用于基本数据类型,可以通过.value进行读写。reactive不能直接用于基本数据类型。
  • 引用类型reactive直接作用于对象或数组,使其成为响应式。对于复杂的数据结构,reactiveref更加适用。
  • 模板中的使用:无论是ref还是reactive创建的响应式数据,都可以直接在模板中使用,Vue 会自动处理。
深度响应式和浅响应式
  • 默认情况下reactive会递归地把一个对象内部的所有属性都转换为响应式数据。
  • 浅响应式:如果你不希望对象内部的所有属性都是响应式的,可以使用shallowReactive函数,它只会使最外层的属性成为响应式,而不会影响嵌套对象。
import { shallowReactive } from 'vue';

const state = shallowReactive({
  innerObject: { count: 0 }
});
// `state`是响应式的,但`state.innerObject`不是响应式的。

reactiveref是Vue 3中组合式API的两大支柱,理解它们之间的差异以及如何选择使用它们,对于高效开发Vue 3应用至关重要。

接下来,我们将讨论toRefs函数,它允许我们从reactive对象中提取出多个响应式引用,以保持结构分解赋值的响应性。

七、toRefs函数

在Vue 3的组合式API中,toRefs函数用于将reactive对象转换为一个普通对象,其中每个属性都是一个ref,这对于保持响应式状态在结构分解赋值(destructuring)时特别有用。

为什么需要toRefs

当你从reactive对象中结构出属性时,这些属性会失去响应性。这是因为结构赋值是基于值的拷贝,所以拷贝出来的值不会和原始的reactive对象保持响应连接。toRefs可以解决这个问题,它允许你在结构分解时保持属性的响应性。

示例代码:

假设我们有一个reactive对象:

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: "Hello Vue 3"
    });

    // 尝试直接结构,会导致失去响应性
    // let { count, message } = state;

    // 使用toRefs来保持响应性
    let { count, message } = toRefs(state);

    return { count, message };
  }
}
如何使用toRefs

toRefs接收一个响应式对象,并返回一个新的对象。返回的对象中的每个属性都是一个指向原始对象相应属性的ref

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

在模板中,你可以直接使用countmessage,就像它们是使用ref创建的响应式引用一样。这保证了即使在结构分解后,你依然可以保持组件的响应性。

toRefsref
  • toRefs适用于将reactive对象转换成一个包含多个ref属性的普通对象,每个ref都是响应式的。
  • ref用于创建单个响应式数据。

使用toRefs可以非常方便地在保持响应性的同时,使用JavaScript的结构分解功能,这对于在多个地方使用或传递reactive对象的部分属性时非常有用。

到目前为止,我们已经讨论了Vue 3的组合式API中的基本响应式API——refreactivetoRefs。这些工具为开发复杂组件提供了灵活性和强大的状态管理能力。

接下来,我们将进一步探讨Vue 3中的计算属性(computed)和侦听器(watch)。这些功能使得我们可以更细致地控制响应式状态的变化和更新。

八、Computed计算属性

在Vue 3中,计算属性(computed)是一种基于响应式依赖进行缓存的计算值。当计算属性依赖的响应式状态发生变化时,计算属性会重新计算。这非常适合用于执行开销较大的计算操作或派生状态。

1. 基本用法

使用computed函数可以创建一个计算属性。computed接收一个函数作为参数,这个函数的返回值就是计算属性的值。当依赖的响应式状态改变时,这个函数会被重新执行。

示例代码:

<template>
  <div>{{ fullName }}</div>
</template>

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

export default {
  setup() {
    const person = reactive({
      firstName: 'John',
      lastName: 'Doe'
    });

    const fullName = computed(() => {
      return `${person.firstName} ${person.lastName}`;
    });

    return { fullName };
  }
}
</script>

在这个例子中,fullName是一个计算属性,它依赖于reactive对象personfirstNamelastName。当person的属性改变时,fullName会自动更新。

2. 高级用法

computed也支持一个带有getset函数的对象,允许你创建可写的计算属性。这在需要执行额外逻辑来处理更新操作时非常有用。

示例代码:

<template>
  <div>{{ fullName }}</div>
  <button @click="changeName">Change Name</button>
</template>

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

export default {
  setup() {
    const person = reactive({
      firstName: 'John',
      lastName: 'Doe'
    });

    const fullName = computed({
      get() {
        return `${person.firstName} ${person.lastName}`;
      },
      set(newValue) {
        const names = newValue.split(' ');
        person.firstName = names[0];
        person.lastName = names[1] || '';
      }
    });

    function changeName() {
      fullName.value = 'Jane Doe';
    }

    return { fullName, changeName };
  }
}
</script>

在这个高级用法中,我们定义了一个可写的计算属性fullName。当尝试设置fullName.value时,设置函数(setter)会被调用,允许我们将一个新值分解并赋值给person.firstNameperson.lastName

计算属性是Vue响应系统的重要部分,它使得管理复杂逻辑和依赖变得简单高效。

接下来,我们将探讨Vue 3中的侦听器(watchwatchEffect),它们提供了一种方法来响应数据的变化。

九、Watch监听

Vue 3的组合式API提供了watchwatchEffect两种方式来侦听响应式数据的变化,并执行相应的副作用。这两种API都非常强大,可以用于执行数据变化时的异步操作、资源清理或复杂的业务逻辑。

1. 单个数据监听 - watch

watch函数用于侦听单个或多个响应式引用(ref)或响应式对象(reactive)的属性,并在它们变化时执行回调函数。watch的回调函数接收新值和旧值作为参数。

示例代码:

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

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

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

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

    function increment() {
      count.value++;
    }

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

在这个例子中,每当count的值变化时,我们都会在控制台打印出一条消息。

2. 多个数据监听

watch也可以同时侦听多个数据源。你需要将它们放在一个数组里,并在回调函数中接收一个数组形式的新值和旧值。

watch([ref1, ref2], ([newVal1, newVal2], [oldVal1, oldVal2]) => {
  // 响应变化
});
3. 复杂数据类型监听

对于复杂数据类型,如使用reactive创建的响应式对象,你可能希望在嵌套属性变化时也能触发侦听器。这时,可以直接将响应式对象传递给watch,Vue会进行深度监听。

4. 监听复杂数据类型中的属性

如果你只想监听响应式对象的某个属性,可以使用一个函数来返回这个属性的值。

watch(
  () => state.someNestedProperty,
  (newValue, oldValue) => {
    // 响应变化
  }
);
5. 开启深度监听

使用watch侦听响应式对象时,默认情况下不会深度侦听。如果需要深度侦听,可以通过传递一个配置对象,将deep属性设置为true

watch(
  state,
  (newValue, oldValue) => {
    // 深度响应变化
  },
  { deep: true }
);
watchEffect的使用

watchEffect函数会立即执行传递给它的回调函数,并响应式地追踪回调函数中使用的任何响应式状态的变化。当依赖的响应式状态发生变化时,watchEffect会再次执行。

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

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

    watchEffect(() => console.log(count.value));

    return { count };
  }
}
</script>

watchwatchEffect提供了灵活且强大的方式来对响应式数据的变化作出反应,它们是Vue组合式API中不可或缺的一部分。

接下来,如果你准备好了,我们可以讨论Vue 3中组件之间的通信,包括父子通信和提供/注入机制。

十、父子通信

在Vue 3中,组件之间的通信是构建应用时的关键部分。Vue 提供了多种方式来实现不同场景下的组件通信,包括但不限于props、自定义事件、提供/注入机制等。我们首先讨论最常见的父子通信方式。

1. 父传子 - Props

Props是父组件向子组件传递数据的主要方式。子组件需要显式声明它期望接收的props。

子组件(ChildComponent.vue):

<!-- 子组件 -->
<template>
  <div>
    {{ parentMessage }}
  </div>
</template>

<script setup>
const props = defineProps({
  parentMessage: String
});
</script>
<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :parentMessage="message" />
  </div>
</template>

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

const message = ref('Hello from parent');
</script>

在这个例子中,父组件通过messageprop向ChildComponent传递了一个字符串。

2. 子传父 - 自定义事件

子组件可以通过触发事件来向父组件传递信息。Vue 3中,使用$emit方法触发事件已被废弃,推荐使用defineEmitscontext.emit

子组件(ChildComponent.vue):

<template>
  <button @click="notifyParent">Click Me</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['custom-event']);

    function notifyParent() {
      emit('custom-event', 'Some data');
    }

    return { notifyParent };
  }
}
</script>

父组件:

<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 输出: Some data
    }
  }
}
</script>

在这个例子中,子组件通过触发custom-event事件,并传递数据来与父组件通信。父组件监听这个事件,并定义了一个处理函数handleCustomEvent来接收数据。

这两种方法是Vue中实现父子通信的基础。通过Props,父组件可以向子组件传递数据,而通过自定义事件,子组件可以向父组件发送消息。

Vue还提供了更高级的通信方式,如提供/注入机制,它允许祖先组件向所有子孙组件传递数据,而无需通过每一层的props来显式传递。

十一、Vue 3中的指令变化

Vue 3引入了一些新指令并更新了一些现有指令的用法,以提高开发效率和应用性能。这里我们重点讨论v-modelv-if系列指令的变化。

1. v-model的变化

在Vue 2中,v-model主要用于在表单控件和应用状态之间创建双向数据绑定。Vue 3扩展了v-model的用法,允许在自定义组件上使用多个v-model绑定。

Vue 2用法:

<input v-model="message" />

Vue 3用法:

Vue 3允许自定义组件上使用多个v-model

<CustomComponent v-model:title="pageTitle" v-model:content="pageContent" />

在自定义组件内部,可以通过defineProps来接收这些属性:

<script setup>
const props = defineProps({
  title: String,
  content: String
});
</script>

并使用emit来更新这些属性:

const emit = defineEmits(['update:title', 'update:content']);
2. v-ifv-else-ifv-else的使用

这一系列的指令在Vue 3中保持不变,用于条件渲染。v-ifv-else-if需要跟一个表达式,v-else不需要。这三个指令必须紧跟在彼此后面使用。

<template>
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else>C</div>
</template>

这些更新和变化反映了Vue 3在灵活性和功能性方面的提升,使得开发者能够更有效地构建复杂且高性能的应用。

Vue 3还引入了其他的新特性和API改进,包括TeleportSuspense以及对Composition API的进一步增强。

十二、Vue 3中的TypeScript支持

Vue 3从一开始就把TypeScript支持作为其核心特性之一。这意味着Vue 3不仅能够提供更好的类型推断和代码智能提示,而且还能让开发者利用TypeScript的全部功能来构建应用。这种一流的TypeScript支持为开发大型应用和提高代码质量带来了巨大的好处。

类型增强

Vue 3利用Composition API提供了更好的类型推断。当你使用refreactive等API时,Vue 3能够准确地推断出相应的类型,这使得在使用TypeScript开发应用时能够获得更为准确的代码提示和类型检查。

示例代码:

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue';

export default defineComponent({
  setup() {
    const count: Ref<number> = ref(0); // `count`被推断为一个数字类型的响应式引用

    function increment() {
      count.value++;
    }

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

在这个例子中,我们明确声明了count是一个数字类型的响应式引用(Ref<number>)。这种类型声明让TypeScript能够提供准确的类型检查和代码提示。

使用defineComponent进行类型推断

Vue 3推荐使用defineComponent函数来定义组件,这不仅使得组件支持TypeScript,而且还能提供更好的类型推断和组件选项的类型检查。

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    message: String
  },
  setup(props) {
    console.log(props.message); // `props.message`被正确推断为`string`
  }
});
</script>

通过defineComponent,Vue 3可以准确地推断propsdatacomputed等选项的类型,大大提高了开发体验。

十三 Suspense

Vue 3引入的Suspense组件是一个用于处理异步组件加载和异步数据的特殊内置组件。它提供了一种新的方式来处理在等待异步操作完成时的UI渲染,特别适用于控制如数据获取、异步组件(或其依赖)加载等场景的用户体验。

工作原理

当一个组件需要进行异步操作,比如数据请求或异步导入另一个组件时,Suspense允许你定义一个“备用”内容(例如加载指示器),在异步操作完成之前显示。这意味着你可以提供一个平滑的用户体验,避免在数据加载时显示一个空白或不完整的页面。

基本用法

Suspense通过两个插槽来工作:

  • default 插槽:包含异步加载的组件。
  • fallback 插槽:在等待异步操作完成时显示的内容。
<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
}
</script>

在这个例子中,AsyncComponent是通过defineAsyncComponent定义的一个异步组件。在AsyncComponent加载过程中,用户会看到“Loading…”信息。一旦组件加载完成,Suspense将渲染该组件,替换掉加载提示。

高级场景

Suspense也支持更复杂的使用场景,比如在组件内部进行异步数据获取。这通常通过组合式API中的async setup()函数实现。

<template>
  <Suspense>
    <template #default>
      <div>{{ data }}</div>
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineComponent } from 'vue';
import { fetchData } from './api'; // 假设的API请求函数

export default defineComponent({
  async setup() {
    const data = await fetchData();
    return { data };
  }
});
</script>

在这个场景中,组件利用async setup()函数来获取数据。在数据未到达之前,用户将看到“Loading…”提示。

虽然Suspense和骨架屏都是提升加载体验的手段,但Suspense更多的是从组件和逻辑层面提供支持,而骨架屏更侧重于视觉和用户感知层面。在实际应用中,二者可以结合使用,即在Suspense的fallback插槽中使用骨架屏,提供更加丰富和直观的加载状态反馈,进一步提升用户体验。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9955.html
标签
评论
发布的文章

使用 mapstructure 解析 json

2024-06-05 13:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!