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

接着奏乐接着舞。2024-04-03 9:38

一、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.extend、Vue.mixin等。
  • EventBus的使用方式发生了变化，推荐使用提供/注入（provide/inject）模式或是Vuex来进行全局状态管理。

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

html 复制代码 
<!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安装：

bash 复制代码 
npm install -g @vue/cli

然后，创建一个新的Vue 3项目：

bash 复制代码 
vue create my-vue-app

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

使用Vite创建项目：

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

bash 复制代码 
npm init vite@latest my-vue-app -- --template vue

接下来，进入项目目录并安装依赖：

bash 复制代码 
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应用：

javascript 复制代码 
import { createApp } from 'vue';
import App from './App.vue';

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

这里，App.vue是根组件，它可以是这样的：

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等选项。这种方式很直观，因为它将不同类型的组件选项分门别类地组织起来。

vue 复制代码 
<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()函数允许你将相关功能组织在一起，而不是基于选项类型分开。这使得代码重用和逻辑提取变得更加简单，尤其是在构建复杂组件时。

vue 复制代码 
<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
vue 复制代码 
<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已经解析完成。你可以在这个函数里定义响应式状态、计算属性和函数，然后返回它们，使其在模板中可用。

示例代码：

vue 复制代码 
<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开头，例如onMounted、onUpdated、onUnmounted等。

示例代码：

vue 复制代码 
<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函数内使用基本类型的数据，那么这些数据不会是响应式的。这意味着当数据变化时，视图不会自动更新。

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

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

示例代码：

vue 复制代码 
<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会递归地将这些数据转换为响应式数据。

示例代码：

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。

示例代码：

vue 复制代码 
<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更加直接，尤其是在处理复杂对象时。

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

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

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

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

七、toRefs函数

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

为什么需要toRefs

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

示例代码：

假设我们有一个reactive对象：

javascript 复制代码 
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。

vue 复制代码 
<template>
  <div>{{ count }}</div>
  <div>{{ message }}</div>
</template>

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

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

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

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

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

八、Computed计算属性

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

1. 基本用法

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

示例代码：

vue 复制代码 
<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对象person的firstName和lastName。当person的属性改变时，fullName会自动更新。

2. 高级用法

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

示例代码：

vue 复制代码 
<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.firstName和person.lastName。

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

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

九、Watch监听

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

1. 单个数据监听 - watch

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

示例代码：

vue 复制代码 
<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也可以同时侦听多个数据源。你需要将它们放在一个数组里，并在回调函数中接收一个数组形式的新值和旧值。

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

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

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

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

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

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

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

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

vue 复制代码 
<script>
import { ref, watchEffect } from 'vue';

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

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

    return { count };
  }
}
</script>

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

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

十、父子通信

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

1. 父传子 - Props

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

子组件（ChildComponent.vue）:

bash 复制代码 
<!-- 子组件 -->
<template>
  <div>
    {{ parentMessage }}
  </div>
</template>

<script setup>
const props = defineProps({
  parentMessage: String
});
</script>
bash 复制代码 
<!-- 父组件 -->
<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方法触发事件已被废弃，推荐使用defineEmits或context.emit。

子组件（ChildComponent.vue）:

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>

父组件:

vue 复制代码 
<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-model和v-if系列指令的变化。

1. v-model的变化

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

Vue 2用法:

vue 复制代码 
<input v-model="message" />

Vue 3用法:

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

vue 复制代码 
<CustomComponent v-model:title="pageTitle" v-model:content="pageContent" />

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

vue 复制代码 
<script setup>
const props = defineProps({
  title: String,
  content: String
});
</script>

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

javascript 复制代码 
const emit = defineEmits(['update:title', 'update:content']);
2. v-if、v-else-if、v-else的使用

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

vue 复制代码 
<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改进，包括Teleport、Suspense以及对Composition API的进一步增强。

十二、Vue 3中的TypeScript支持

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

类型增强

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

示例代码：

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，而且还能提供更好的类型推断和组件选项的类型检查。

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可以准确地推断props、data、computed等选项的类型，大大提高了开发体验。

十三 Suspense

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

工作原理

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

基本用法

Suspense通过两个插槽来工作：

  • default 插槽：包含异步加载的组件。
  • fallback 插槽：在等待异步操作完成时显示的内容。
vue 复制代码 
<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()函数实现。

vue 复制代码 
<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插槽中使用骨架屏，提供更加丰富和直观的加载状态反馈，进一步提升用户体验。

相关推荐
夜斗(dou)10 分钟前
node.js文件压缩包解析，反馈解析进度，解析后的文件字节正常
开发语言·javascript·node.js
恩爸编程43 分钟前
纯 HTML+CSS+JS 实现一个炫酷的圣诞树动画特效
javascript·css·html·圣诞树·圣诞树特效·圣诞树js实现·纯js实现圣诞树
呜呼~2251444 分钟前
前后端数据交互
java·vue.js·spring boot·前端框架·intellij-idea·交互·css3
神雕杨1 小时前
node js 过滤空白行
开发语言·前端·javascript
网络安全-杰克1 小时前
《网络对抗》—— Web基础
前端·网络
m0_748250741 小时前
2020数字中国创新大赛-虎符网络安全赛道丨Web Writeup
前端·安全·web安全
周伯通*1 小时前
策略模式以及优化
java·前端·策略模式
艾斯特_1 小时前
前端代码装饰器的介绍及应用
前端·javascript
Sokachlh1 小时前
【elementplus】中文模式
前端·javascript
轻口味1 小时前
【每日学点鸿蒙知识】hap安装报错、APP转移账号、import本地文件、远程包构建问题、访问前端页面方法
前端·华为·harmonyos
热门推荐
01Gitlab ci/cd02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04新手学习VR全景需要知道的几个问题05优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间06HCIA-datacom数通题库和录播视频资料07RAG 实践- Ollama+RagFlow 部署本地知识库08【一文读懂】NTN（非地面网络）技术介绍09支付宝短视频平台创作分成激励项目10docker安装启动问题解决排查