当前位置：首页 > article >正文

如何快速入门 Vue 3

article 2024/9/23 13:18:36

如何快速入门 Vue 3

Vue.js 是一个流行的前端 JavaScript 框架，以其简洁、高效而著称。Vue 3 作为最新的主要版本，带来了许多新特性和改进，包括更好的性能、更小的体积以及更多的内置功能。以下是一份快速入门 Vue 3 的指南。

一、了解 Vue 3 的新特性

在开始之前，了解 Vue 3 的一些关键新特性是很有帮助的：

Composition API：Vue 3 引入了 Composition API，提供了一种更灵活的方式来组织组件逻辑。
响应式系统的改进：Vue 3 的响应式系统经过重写，性能得到显著提升。
Teleport：一个新的内置组件，允许你将组件的子节点“传送”到 DOM 中的其他位置。
Fragments：支持多个根节点，使得组件可以返回多个元素。
自定义渲染器 API：允许开发者创建自定义的渲染器。

二、环境准备

要开始使用 Vue 3，你需要准备以下环境：

Node.js：确保你的开发环境中安装了 Node.js，Vue 3 需要 Node.js 版本 10.0 或更高。
Vue CLI：Vue CLI 是 Vue 官方的命令行工具，用于快速生成和管理 Vue 项目。安装 Vue CLI 的命令是：
bash

代码解读

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

三、创建 Vue 3 项目

使用 Vue CLI 创建一个新的 Vue 3 项目：

打开终端或命令提示符。
输入以下命令创建新项目：
lua

代码解读

复制代码
vue create my-vue3-app
按照提示选择 Vue 3 预设或手动选择特性。

四、探索项目结构

创建项目后，熟悉一下项目的基本结构：

src/：存放所有的源代码。
components/：存放 Vue 组件。
App.vue：根组件。
main.js：入口文件，用于创建 Vue 实例。
public/：存放静态资源，如 index.html。

五、使用 Composition API

Vue 3 的 Composition API 提供了一种新的方式来组织组件逻辑，它允许开发者将组件的功能分割成可复用的函数。以下是一些实际的 Composition API 使用示例。

1. 基础响应式状态

使用 ref 创建响应式状态：

xml

代码解读

复制代码

<template> <button @click="increment">Count is {{ count }}</button> </template> <script setup> import { ref } from 'vue'; const count = ref(0); function increment() { count.value++; } </script>

2. 计算属性

使用 computed 创建计算属性：

xml

代码解读

复制代码

<template> <div>Double Count: {{ doubleCount }}</div> </template> <script setup> import { ref, computed } from 'vue'; const count = ref(0); const doubleCount = computed(() => count.value * 2); </script>

3. 侦听器

使用 watch 和 watchEffect 来侦听响应式状态的变化：

xml

代码解读

复制代码

<template> <button @click="increment">Count is {{ count }}</button> </template> <script setup> import { ref, watchEffect } from 'vue'; const count = ref(0); watchEffect(() => { console.log(`count is now: ${count.value}`); }); function increment() { count.value++; } </script>

4. 生命周期钩子

使用 onMounted, onUpdated, onUnmounted 等生命周期钩子：

ini

代码解读

复制代码

<template> <div>Component is {{ state }}</div> </template> <script setup> import { ref, onMounted, onUpdated, onUnmounted } from 'vue'; const state = ref('mounted'); onMounted(() => { state.value = 'mounted'; }); onUpdated(() => { state.value = 'updated'; }); onUnmounted(() => { state.value = 'unmounted'; }); </script>

5. 自定义 Hook

创建自定义的 Hook 来复用逻辑：

javascript

代码解读

复制代码

// useCounter.js export default function useCounter(initialValue) { const count = ref(initialValue); function increment() { count.value++; } return { count, increment }; } // MyComponent.vue <template> <button @click="increment">Count is {{ count }}</button> </template> <script setup> import useCounter from './useCounter'; const { count, increment } = useCounter(10); </script>

6. 提供和注入

使用 provide 和 inject 进行跨组件的状态共享：

javascript

代码解读

复制代码

// ParentComponent.vue <template> <ChildComponent /> </template> <script setup> import { provide } from 'vue'; import ChildComponent from './ChildComponent.vue'; provide('theme', 'dark'); </script> // ChildComponent.vue <template> <div>The theme is {{ theme }}</div> </template> <script setup> import { inject } from 'vue'; const theme = inject('theme'); </script>