前端刺客系列----Vue 3 入门介绍

目录

一.什么是 Vue 3？

二.Vue 3 的主要特性

三,Vue3项目实战

四.总结


在前端开发的世界里，Vue.js 作为一款渐进式的 JavaScript 框架，已成为许多开发者的首选工具。自从 Vue 3 发布以来，它带来了许多重要的改进和新特性，不仅提升了性能，还使得开发体验更加流畅。在这篇文章中，我们将详细介绍 Vue 3 的核心概念，并通过一些简单的代码示例，帮助大家快速上手 Vue 3。

一.什么是 Vue 3？

Vue.js 是一款渐进式的 JavaScript 框架，用于构建用户界面。它的设计理念非常灵活，可以逐步引入到项目中，适应不同规模的需求。Vue 3 是 Vue.js 框架的最新版本，它在 Vue 2 的基础上进行了全面的优化，带来了以下几大亮点：

性能提升：Vue 3 引入了更高效的虚拟 DOM 和组件渲染机制，使得整体性能得到了显著提升。
组合式 API (Composition API)：这是一种全新的编写组件的方式，使得逻辑复用和代码组织变得更加灵活和清晰。
TypeScript 支持：Vue 3 在设计时就考虑到了 TypeScript，增强了对类型系统的支持。
更小的包体积：Vue 3 的核心库相比 Vue 2 更加精简，加载速度更快。
多个其他新特性：如 Teleport、Suspense、Fragment 等。
在这篇文章中，我们会深入探索 Vue 3 的主要新特性，并通过示例帮助大家更好地理解它。

二.Vue 3 的主要特性

1. 组合式 API (Composition API)
组合式 API 是 Vue 3 中最为重要的新增特性之一。它允许开发者通过函数的方式组织和复用逻辑，相比于 Vue 2 中的选项式 API (Options API)，组合式 API 提供了更强的灵活性和可维护性。

为什么使用组合式 API？
更好的逻辑复用：组合式 API 允许将相关的逻辑封装到函数中，使得代码复用变得更加简洁。
更清晰的代码结构：你可以按照功能进行代码分离，而不再依赖于 Vue 2 中的 data、methods、computed 等选项，避免了大量冗长的逻辑。
TypeScript 更好的支持：组合式 API 更适合与 TypeScript 配合使用，因为它能更好地推导类型。
代码示例：使用组合式 API 创建一个计数器

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

<script setup>
// 引入 Composition API 中的 `ref` 函数
import { ref } from 'vue'

// 定义一个响应式变量 `count`
const count = ref(0)

// 定义一个方法来更新 `count`
const increment = () => {
  count.value++
}
</script>

在这个例子中，我们使用了 ref 函数来创建一个响应式变量 count，并用 increment 方法来更新它。ref 会将基本类型（如数字、字符串等）包装成响应式对象，通过 .value 来访问和修改其值。

2. 更高效的虚拟 DOM 和性能提升
Vue 3 在性能方面做了大量的优化。最显著的改进之一是虚拟 DOM 的实现变得更加高效。虚拟 DOM 是 Vue 用来追踪 DOM 变更的技术，它允许 Vue 对 DOM 进行精确的更新，而不是每次都完全重渲染整个页面。Vue 3 在此基础上进行了优化，使得渲染速度更快，尤其是在大规模应用中。

3. TypeScript 支持
Vue 3 从一开始就为 TypeScript 提供了更全面的支持。在 Vue 2 中，TypeScript 的集成不是特别好，而 Vue 3 则原生支持 TypeScript，提供了更好的类型推导和类型检查。

代码示例：使用 TypeScript 和 Vue 3

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

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref<number>(0)

const increment = () => {
  count.value++
}
</script>

在这个示例中，我们通过 lang="ts" 声明了 Vue 文件使用 TypeScript，并为 count 使用了明确的类型定义 ref<number>(0)，这保证了变量 count 始终是数字类型。

4. Teleport
Vue 3 引入了一个新的内置组件 Teleport，它允许将一个组件的内容渲染到页面的任何位置，而不是默认的父组件中。这对于某些特殊场景，比如模态框、通知等非常有用。

代码示例：使用 Teleport 实现一个模态框

<template>
  <div>
    <button @click="showModal = true">Open Modal</button>
    <Teleport to="body">
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          <p>This is a modal!</p>
          <button @click="showModal = false">Close</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

const showModal = ref(false)
</script>

<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>

在这个例子中，我们使用了 Teleport 将模态框内容渲染到 body 元素下，而不是当前组件的 DOM 中。

5. Suspense 和异步组件
Vue 3 引入了 Suspense 组件，它使得异步加载的组件能够在数据加载完毕之前提供一个“加载中”的状态。这对于需要异步加载的应用非常有用，提升了用户体验。

代码示例：使用 Suspense 加载异步组件

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

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

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)
</script>

三,Vue3项目实战

项目结构

my-vue3-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── TaskList.vue
│   │   ├── TaskItem.vue
│   │   └── AddTask.vue
│   ├── store/
│   │   └── taskStore.js
│   ├── views/
│   │   ├── Home.vue
│   │   └── NotFound.vue
│   ├── router/
│   │   └── index.js
│   ├── App.vue
│   ├── main.js
├── package.json
└── vite.config.js

1. src/main.js - 项目入口文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createStore } from 'vuex'

const app = createApp(App)

app.use(router)
app.use(createStore({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task)
    },
    deleteTask(state, taskId) {
      state.tasks = state.tasks.filter(task => task.id !== taskId)
    },
    toggleTaskCompletion(state, taskId) {
      const task = state.tasks.find(t => t.id === taskId)
      if (task) {
        task.completed = !task.completed
      }
    },
    editTask(state, { taskId, updatedTask }) {
      const task = state.tasks.find(t => t.id === taskId)
      if (task) {
        Object.assign(task, updatedTask)
      }
    }
  },
  getters: {
    completedTasks: (state) => {
      return state.tasks.filter(task => task.completed)
    },
    pendingTasks: (state) => {
      return state.tasks.filter(task => !task.completed)
    }
  }
}))

app.mount('#app')

2. src/router/index.js - 路由配置 

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import NotFound from '../views/NotFound.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/:catchAll(.*)',
    name: 'NotFound',
    component: NotFound
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

3. src/views/Home.vue - 主页视图

<template>
  <div class="home">
    <h1>Task Manager</h1>
    <AddTask />
    <h2>Pending Tasks</h2>
    <TaskList :tasks="pendingTasks" />
    <h2>Completed Tasks</h2>
    <TaskList :tasks="completedTasks" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import TaskList from '../components/TaskList.vue'
import AddTask from '../components/AddTask.vue'

const store = useStore()

const pendingTasks = computed(() => store.getters.pendingTasks)
const completedTasks = computed(() => store.getters.completedTasks)
</script>

<style scoped>
.home {
  padding: 20px;
}
h1 {
  color: #42b983;
}
</style>

4. src/components/AddTask.vue - 添加任务组件

<template>
  <div class="add-task">
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <button @click="addTask">Add Task</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'

const newTask = ref('')
const store = useStore()

const addTask = () => {
  if (newTask.value.trim()) {
    store.commit('addTask', {
      id: Date.now(),
      title: newTask.value,
      completed: false
    })
    newTask.value = ''
  }
}
</script>

<style scoped>
.add-task {
  margin-bottom: 20px;
}
input {
  padding: 8px;
  margin-right: 10px;
  width: 200px;
}
button {
  padding: 8px 12px;
}
</style>

5. src/components/TaskList.vue - 任务列表组件

<template>
  <div>
    <ul>
      <TaskItem
        v-for="task in tasks"
        :key="task.id"
        :task="task"
      />
    </ul>
  </div>
</template>

<script setup>
import TaskItem from './TaskItem.vue'
import { defineProps } from 'vue'

const props = defineProps({
  tasks: Array
})
</script>

<style scoped>
ul {
  list-style: none;
  padding-left: 0;
}
</style>

6. src/components/TaskItem.vue - 任务项组件

<template>
  <li :class="{ completed: task.completed }">
    <span @click="toggleCompletion">{{ task.title }}</span>
    <button @click="deleteTask">Delete</button>
    <button @click="editTask">Edit</button>
  </li>
</template>

<script setup>
import { defineProps } from 'vue'
import { useStore } from 'vuex'

const props = defineProps({
  task: Object
})

const store = useStore()

const toggleCompletion = () => {
  store.commit('toggleTaskCompletion', props.task.id)
}

const deleteTask = () => {
  store.commit('deleteTask', props.task.id)
}

const editTask = () => {
  const newTitle = prompt('Edit Task Title', props.task.title)
  if (newTitle && newTitle !== props.task.title) {
    store.commit('editTask', {
      taskId: props.task.id,
      updatedTask: { title: newTitle }
    })
  }
}
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
button {
  margin-left: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

7. src/views/NotFound.vue - 404 页面视图

<template>
  <div class="not-found">
    <h1>404 - Page Not Found</h1>
  </div>
</template>

<script setup>
</script>

<style scoped>
.not-found {
  text-align: center;
  padding: 50px;
}
</style>

8. public/index.html - 项目 HTML 模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 Task Manager</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

9. package.json - 项目依赖

{
  "name": "vue3-task-manager",
  "version": "1.0.0",
  "main": "src/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "vite": "^4.0.0"
  }
}

10. vite.config.js - Vite 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

四.总结

    Vue 3 是 Vue.js 框架的最新版本，它带来了多个令人期待的改进和特性，旨在提升开发者体验和性能。最显著的变化是引入了 组合式 API，通过 setup() 函数和 ref、reactive 等新的响应式机制，开发者可以更灵活地组织组件逻辑，避免了 Vue 2 中的复杂选项式 API，提升了代码的可维护性和逻辑复用性。此外，Vue 3 进一步优化了性能，框架的体积比 Vue 2 小了约 30%，并且虚拟 DOM 的更新算法也得到了改进，使得更新速度更快，启动时间也大大缩短。同时，Vue 3 完美支持 TypeScript，增强了类型推导和类型检查，使得大型项目的开发更加安全和高效。Vue 3 还支持 Fragment，允许组件返回多个根节点，从而避免了不必要的 DOM 包裹元素。新加入的 Teleport 组件使得将内容渲染到页面的任意位置变得简单，例如模态框、弹窗等 UI 组件的处理更加灵活。而 Suspense 则提供了对异步组件的优雅处理，允许开发者在组件加载时显示占位符内容，改善用户体验。此外，Vue 3 与 Vite 集成紧密，Vite 作为构建工具提供了极快的热更新和构建速度，极大提升了开发效率。对于 Vue 2 的开发者，Vue 3 提供了良好的向后兼容性，使得迁移过程更加平滑，且框架支持通过 @vue/compat 模式逐步过渡。总体而言，Vue 3 是一个强大、灵活且高效的框架，既适合小型项目，也能够满足大型应用的开发需求，帮助开发者构建更现代化、响应式和可扩展的 Web 应用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/912950.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux入门：环境变量与进程地址空间

Linux入门：环境变量与进程地址空间

一. 环境变量 1. 概念 1️⃣基本概念&#xff1a; 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数 如&#xff1a;我们在编写C/C代码的时候&#xff0c;在链接的时候&#xff0c;从来不知道我们的所链接的动态静态库在哪里&#x…
阅读更多...
2024版最新最全的Kali Linux操作系统安装使用教程（非常详细）超十万字解说Kali零基础入门到精通教程，收藏这一篇就够了

2024版最新最全的Kali Linux操作系统安装使用教程（非常详细）超十万字解说Kali零基础入门到精通教程，收藏这一篇就够了

前言 这是向阳给粉丝盆友们整理的网络安全渗透测试入门阶段渗透测试工具Kali全套教程&#xff0c;本文超十万字超长分析&#xff0c;建议大家收藏慢慢学习&#xff01; 喜欢的朋友们&#xff0c;记得给向阳点赞支持和收藏一下&#xff0c;关注我&#xff0c;学习黑客技术 Ka…
阅读更多...
【计网】基于TCP协议的Echo Server程序实现与多版本测试

【计网】基于TCP协议的Echo Server程序实现与多版本测试

目录 前言&#xff1a; 1、InitServer类的实现 1.1. 创建流式套接字 1.2. bind 绑定一个固定的网络地址和端口号 1.3.listen监听机制 1.4.完整代码 2. 循环接收接口与服务接口 2.1.accept函数讲解 讲个商场拉客的故事方便我们理解&#xff1a; 2.2.服务接口实现 3.服…
阅读更多...
Latex公式转换编辑网站

Latex公式转换编辑网站

https://editor.codecogs.com/ https://www.latexlive.com/home## https://simpletex.cn/ai/latex_ocr https://webdemo.myscript.com/views/math/index.html# 参考 https://latex.91maths.com/ https://web.baimiaoapp.com/image-to-latex https://blog.csdn.net/qq_45100…
阅读更多...
多语言电商系统的多语言设计机制

多语言电商系统的多语言设计机制

在全球化电商市场中&#xff0c;跨语言沟通是提升用户体验和扩大市场份额的关键。为了满足不同语言用户的需求&#xff0c;构建一个支持多语言的电商系统已成为企业扩展国际市场的重要步骤。多语言电商系统需要能够根据用户的语言偏好自动显示内容&#xff0c;同时保证翻译的准…
阅读更多...
VBA08-if语句

VBA08-if语句

一、单行 If 语句 If x > 10 Then MsgBox "x is greater than 10"二、多行 If...Then...End If 语句 If x > 10 ThenMsgBox "x is greater than 10"y x 5 End If 三、If...Then...Else 语句 If condition Then 当条件为真时执行的代码块stateme…
阅读更多...
Python数据可视化seaborn

Python数据可视化seaborn

产品经理在做数据分析时可能需要通过可视化来分析。seaborn官网 1. relplot 散点图 https://seaborn.pydata.org/examples/scatterplot_sizes.html import pandas as pd import seaborn as sns df pd.DataFrame({x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],y: [8, 6, 7, 8, 4, 6,…
阅读更多...
【数据库系列】postgresql链接详解

【数据库系列】postgresql链接详解

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
webpack 执行流程 — 实现 myWebpack

webpack 执行流程 — 实现 myWebpack

前言 实现 myWebpack 主要是为了更好的理解&#xff0c;webpack 中的工作流程&#xff0c;一切都是最简单的实现&#xff0c;不包含细节内容和边界处理&#xff0c;涉及到 ast 抽象语法树和编译代码部分&#xff0c;最好可以打印出来观察一下&#xff0c;方便后续的理解。 re…
阅读更多...
Hadoop生态圈框架部署（五）- Zookeeper完全分布式部署

Hadoop生态圈框架部署（五）- Zookeeper完全分布式部署

文章目录 前言一、Zookeeper完全分布式部署&#xff08;手动部署&#xff09;1. 下载Zookeeper2. 上传安装包2. 解压zookeeper安装包3. 配置zookeeper配置文件3.1 创建 zoo.cfg 配置文件3.2 修改 zoo.cfg 配置文件3.3 创建数据持久化目录并创建myid文件 4. 虚拟机hadoop2安装并…
阅读更多...
Python小白学习教程从入门到入坑------第二十九课 访问模式（语法进阶）

Python小白学习教程从入门到入坑------第二十九课 访问模式（语法进阶）

目录 一、访问模式 1.1 r 1.2 w 1.3 1.3.1 r 1.3.2 w 1.3.3 a 1.4 a 一、访问模式 模式可做操作若文件不存在是否覆盖r只能读报错-r可读可写报错是w只能写创建是w可读可写创建是a只能写创建否&#xff0c;追加写a可读可写创建否&#xff0c;追加写 1.1 r r&…
阅读更多...
巡检任务管理系统（源码+文档+部署+讲解）

巡检任务管理系统（源码+文档+部署+讲解）

本文将深入解析“巡检任务管理系统”的项目&#xff0c;探究其架构、功能以及技术栈&#xff0c;并分享获取完整源码的途径。 系统概述 巡检任务管理、巡检抽查、巡检任务随机分派等功能 本项目名称为巡检管理系统&#xff0c;是对巡检工作进行数字化管理的系统。该系统适用…
阅读更多...
自动驾驶系列—自动驾驶车辆的姿态与定位：IMU数据在复杂环境中的关键作用

自动驾驶系列—自动驾驶车辆的姿态与定位：IMU数据在复杂环境中的关键作用

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…
阅读更多...
如何运营Github Org

如何运营Github Org

目录 前言 正文 关于分支保护 特别说明 如何在Windows环境下配置GitHub Desktop GPG签名&#xff1f; 推荐分支保护选择 关于good first issue 如何设置good first issue&#xff1f; 关于Project 尾声 &#x1f52d; Hi,I’m Pleasure1234&#x1f331; I’m currently learni…
阅读更多...
odrive代码阅读笔记

odrive代码阅读笔记

电机参数 电流环带宽 atan2 #include "float.h" #define MACRO_MAX(x, y) (((x) > (y)) ? (x) : (y)) #define MACRO_MIN(x, y) (((x) < (y)) ? (x) : (y)) #define f_abs(x) ((x > 0) ? x : -x) // based on https://math.stackexchange.com/a/11050…
阅读更多...
笔记本怎么开启TPM2.0_笔记本开启TPM2.0教程(不同笔记本开启tpm2.0方法)

笔记本怎么开启TPM2.0_笔记本开启TPM2.0教程(不同笔记本开启tpm2.0方法)

在win11最低要求是提示&#xff0c;电脑必须满足 TPM 2.0&#xff0c;并开需要开启TPM 才能正常安装windows11系统&#xff0c;有很多笔记本的用户问我&#xff0c;笔记本怎么开启tpm功能呢&#xff1f;下面小编就给大家详细介绍一下笔记本开启tpm功能的方法。 如何确认你笔记本…
阅读更多...
ModuleNotFoundError: No module named ‘_ssl‘ centos7中的Python报错

ModuleNotFoundError: No module named ‘_ssl‘ centos7中的Python报错

报错 ModuleNotFoundError: No module named ‘_ssl’ 解决步骤&#xff1a; 1.下载openssl wget https://www.openssl.org/source/openssl-3.0.7.tar.gz tar -zxvf openssl-3.0.7.tar.gz cd openssl-3.0.72.编译安装 ./config --prefix/usr/local/openssl make make install3…
阅读更多...
迁移学习相关基础

迁移学习相关基础

迁移学习 目标 将某个领域或任务上学习到的知识或模式应用到不同但相关的领域或问题中。 主要思想 从相关领域中迁移标注数据或者知识结构、完成或改进目标领域或任务的学习效果。 概述 Target data&#xff1a;和你的任务有直接关系的数据&#xff0c;但数据量少&#xff…
阅读更多...
ReactPress系列—Next.js 的动态路由使用介绍

ReactPress系列—Next.js 的动态路由使用介绍

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议&#xff0c;感谢Star。 Next.js 的动态路由使用介绍 Next.js 是一个流行的 React 框架&#xff0c;支持服务端渲染、静态站点生成和动态路由等功能&#xff0c;极大地简化…
阅读更多...
一文熟悉新版llama.cpp使用并本地部署LLAMA

一文熟悉新版llama.cpp使用并本地部署LLAMA

0. 简介 最近是快到双十一了再给大家上点干货。去年我们写了一个大模型的系列&#xff0c;经过一年&#xff0c;大模型的发展已经日新月异。这一次我们来看一下使用llama.cpp这个项目&#xff0c;其主要解决的是推理过程中的性能问题。主要有两点优化&#xff1a; llama.cpp …
阅读更多...
最新文章

Copyright @ 2022~2023