现代Web开发:Vue 3 组件化开发实战

💓 博客主页:瑕疵的CSDN主页
📝 Gitee主页:瑕疵的gitee主页
⏩ 文章专栏:《热点资讯》

现代Web开发:Vue 3 组件化开发实战

现代Web开发:Vue 3 组件化开发实战

  • 现代Web开发:Vue 3 组件化开发实战
    • 引言
    • Vue 3 概述
      • 什么是 Vue 3
      • Vue 3 的特点
    • Vue 3 核心概念
      • Composition API
      • 响应式系统
      • 生命周期钩子
      • Teleport
      • Provide 和 Inject
    • 实战案例分析
      • 构建一个简单的待办事项应用
        • 项目结构
        • 安装依赖
        • 创建主组件
        • 创建待办事项列表组件
        • 启动应用
    • Vue 3 最佳实践
      • 严格模式
      • 按需加载
      • 代码分割
      • 缓存策略
      • 性能监控
    • 总结
    • 参考资料

引言

Vue 3 是 Vue.js 的最新版本,带来了许多新特性和性能优化,使得开发更加高效和灵活。本文将详细介绍 Vue 3 的基本概念、核心功能以及组件化开发的最佳实践,帮助读者更好地理解和使用这一强大工具。

Vue 3 概述

什么是 Vue 3

Vue 3 是一个渐进式 JavaScript 框架,用于构建用户界面。它具有轻量级、易学易用的特点,同时提供了丰富的功能和良好的性能。

Vue 3 的特点

  • Composition API:提供了一种更灵活、更强大的方式来组织和复用逻辑代码。
  • 更好的性能:通过 Proxy 对象实现了响应式系统的优化,提高了应用的性能。
  • TypeScript 支持:原生支持 TypeScript,提供了更好的类型检查和开发体验。
  • 更小的体积:通过 Tree Shaking 技术,减少了最终打包文件的大小。
  • 更好的工具链:提供了更强大的 CLI 工具和插件系统,简化了项目的搭建和维护。

Vue 3 核心概念

Composition API

Composition API 是 Vue 3 的一大亮点,它提供了一种更灵活的方式来组织和复用逻辑代码。

  • setup 函数:在组件的 setup 函数中,可以编写响应式数据、计算属性、方法等。
    <template><div>{{ message }}</div>
    </template><script>
    import { ref, computed } from 'vue';export default {setup() {const message = ref('Hello, Vue 3!');const reversedMessage = computed(() => {return message.value.split('').reverse().join('');});function changeMessage() {message.value = 'Vue 3 is awesome!';}return {message,reversedMessage,changeMessage,};},
    };
    </script>

响应式系统

Vue 3 通过 Proxy 对象实现了响应式系统的优化,提高了应用的性能。

  • ref 和 reactiveref 用于创建响应式的基本数据类型,reactive 用于创建响应式的对象。
    import { ref, reactive } from 'vue';const count = ref(0); // 基本数据类型
    const state = reactive({ count: 0 }); // 对象

生命周期钩子

Vue 3 的生命周期钩子与 Vue 2 类似,但在 Composition API 中,生命周期钩子的使用方式有所不同。

  • 生命周期钩子onMountedonUnmounted 等。
    import { onMounted, onUnmounted } from 'vue';export default {setup() {onMounted(() => {console.log('Component mounted');});onUnmounted(() => {console.log('Component unmounted');});return {};},
    };

Teleport

Teleport 允许我们将组件的内容渲染到 DOM 的任何位置,而不受组件层级的限制。

  • Teleport 示例:将模态框渲染到 <body> 标签中。
    <template><teleport to="body"><div class="modal"><p>This is a modal dialog</p><button @click="$emit('close')">Close</button></div></teleport>
    </template><script>
    export default {emits: ['close'],
    };
    </script><style>
    .modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: white;padding: 20px;border: 1px solid #ccc;
    }
    </style>

Provide 和 Inject

Provide 和 Inject 用于在组件树中传递数据,避免了通过多层 prop 传递的麻烦。

  • Provide 和 Inject 示例:在父组件中提供数据,在子组件中注入数据。

    <!-- ParentComponent.vue -->
    <template><child-component></child-component>
    </template><script>
    import { provide } from 'vue';
    import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},setup() {provide('message', 'Hello from parent!');return {};},
    };
    </script>
    
    <!-- ChildComponent.vue -->
    <template><div>{{ message }}</div>
    </template><script>
    import { inject } from 'vue';export default {setup() {const message = inject('message');return {message,};},
    };
    </script>
    

实战案例分析

构建一个简单的待办事项应用

假设我们要构建一个简单的待办事项应用,包含添加、删除和标记完成功能。

项目结构
todo-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── TodoList.vue
│   ├── App.vue
│   ├── main.js
├── package.json
└── vite.config.js
安装依赖
npm init vite@latest todo-app --template vue
创建主组件

src/App.vue 中创建主组件。

<template><div id="app"><h1>To-Do List</h1><todo-list></todo-list></div>
</template><script>
import TodoList from './components/TodoList.vue';export default {name: 'App',components: {TodoList,},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
创建待办事项列表组件

src/components/TodoList.vue 中创建待办事项列表组件。

<template><div><input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new to-do" /><ul><li v-for="(todo, index) in todos" :key="index"><span :class="{ completed: todo.completed }" @click="toggleComplete(index)">{{ todo.text }}</span><button @click="deleteTodo(index)">Delete</button></li></ul></div>
</template><script>
import { ref } from 'vue';export default {setup() {const newTodo = ref('');const todos = ref([]);function addTodo() {if (newTodo.value.trim() !== '') {todos.value.push({ text: newTodo.value, completed: false });newTodo.value = '';}}function deleteTodo(index) {todos.value.splice(index, 1);}function toggleComplete(index) {todos.value[index].completed = !todos.value[index].completed;}return {newTodo,todos,addTodo,deleteTodo,toggleComplete,};},
};
</script><style>
.completed {text-decoration: line-through;color: gray;
}
</style>
启动应用

运行以下命令启动应用。

npm run dev

打开浏览器访问 http://localhost:3000,可以看到待办事项应用已经成功运行。

Vue 3 最佳实践

严格模式

在生产环境中使用严格模式,可以提高构建性能和安全性。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],build: {target: 'esnext',},
});

按需加载

通过动态导入实现按需加载,提高应用的加载速度。

<template><div><button @click="loadComponent">Load Component</button><component v-if="loadedComponent" :is="loadedComponent"></component></div>
</template><script>
import { ref } from 'vue';export default {setup() {const loadedComponent = ref(null);const loadComponent = () => {import('./LazyComponent.vue').then((module) => {loadedComponent.value = module.default;});};return {loadedComponent,loadComponent,};},
};
</script>

代码分割

使用 defineAsyncComponent 进行代码分割,减少初始加载时间。

import { defineAsyncComponent } from 'vue';const LazyComponent = defineAsyncComponent(() =>import('./LazyComponent.vue')
);export default {components: {LazyComponent,},
};

缓存策略

通过 HTTP 缓存头和静态生成,提高应用的加载速度。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {headers: {'Cache-Control': 'public, max-age=0, s-maxage=31536000',},},
});

性能监控

使用 vue-devtools 进行性能监控。

npm install -g vue-devtools

总结

通过本文,我们深入了解了 Vue 3 的基本概念、核心功能以及组件化开发的最佳实践。Vue 3 通过 Composition API、响应式系统优化、更好的 TypeScript 支持等特性,使得现代 Web 应用的开发更加高效和灵活。希望本文能帮助读者更好地理解和应用 Vue 3,提升Web开发能力。
Vue 3 组件结构图

参考资料

  • Vue 3 官方文档
  • Vue 3 深入解析
  • Vue 3 最佳实践

Vue 3 项目结构图

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity引擎智能座舱解决方案

作为全球领先的 3D 引擎之一&#xff0c;Unity引擎为车载3D HMI提供全栈支持。即为从概念设计到量产部署的整个 HMI 工作流程提供创意咨询、性能调优、项目开发等解决方案&#xff0c;从而为车载信息娱乐系统和智能驾驶座舱打造令人惊叹的交互式体验。 专为中国车企打造的HMI引…

MySQL必会知识精华6(组合WHERE子句)

我们的目标是&#xff1a;按照这一套资料学习下来&#xff0c;大家可以完成数据库增删改查的实际操作。同时轻松应对面试或者笔试题中MySQL相关题目。 上篇文章我们先做一下数据库的where条件过滤的方法&#xff0c;都是单个条件的过滤。本篇文章主要介绍查询的组合WHERE子句的…

[C++11] 可变参数模板

文章目录 基本语法及原理可变参数模板的基本语法参数包的两种类型可变参数模板的定义 sizeof... 运算符可变参数模板的实例化原理可变参数模板的意义 包扩展包扩展的基本概念包扩展的实现原理编译器如何展开参数包包扩展的高级应用 emplace 系列接口emplace_back 和 emplace 的…

欺诈文本分类检测(十八):基于llama.cpp+CPU推理

1. 前言 前文我们用Lora训练出自己的个性化模型后&#xff0c;首先面临的问题是&#xff1a;如何让模型在普通机器上跑起来&#xff1f;毕竟模型微调时都是在几十G的专用GPU上训练的&#xff0c;如果换到只有CPU的普通电脑上&#xff0c;可能会面临几秒蹦一个词的尴尬问题。 …

硬件基础06 滤波器——无源、有源(含Filter Solutions、Filter Pro、MATLAB Fdatool)

目录 一、Filter Solutions 1、软件资源及安装教程如下 2、使用相关内容 二、Filter Pro使用 1、软件资源及安装教程如下 2、使用相关内容 三、MATLAB Fdatool 1、在matlab命令中输入fdatool 2、输入相关参数&#xff0c;例如低通、FIR、20阶、hamming窗 3、调用 &am…

【HGT】文献精讲:Heterogeneous Graph Transformer

【HGT】文献精讲&#xff1a;Heterogeneous Graph Transformer 标题&#xff1a; Heterogeneous Graph Transformer &#xff08;异构图Transformer&#xff09; 作者团队&#xff1a; 加利福尼亚大学Yizhou Sun 摘要&#xff1a; 近年来&#xff0c;图神经网络&#xff08;GN…

大厂基本功 | MySQL 三大日志 ( binlog、redo log 和 undo log ) 的作用?

前言 MySQL日志 主要包括错误日志、查询日志、慢查询日志、事务日志、二进制日志几大类。其中&#xff0c;比较重要的还要属二进制日志binlog&#xff08;归档日志&#xff09;和事务日志redo log&#xff08;重做日志&#xff09;和undo log&#xff08;回滚日志&#xff09;…

【系统架构设计师(第2版)】五、软件工程基础知识

5.1 软件工程 20世纪60年代&#xff0c;为了解决软件危机&#xff0c;提出了软件工程的概念。 软件危机的具体表现&#xff1a; 软件开发进度难以预测&#xff1b;软件开发成本难以控制&#xff1b;软件功能难以满足用户期望&#xff1b;软件质量无法保证&#xff1b;软件难以…

手机内卷下一站,AI Agent

作者 | 辰纹 来源 | 洞见新研社 2024年除夕夜&#xff0c;OPPO在央视春晚即将开始前举办了一场“史上最短发布会”&#xff0c;OPPO首席产品官刘作虎宣布&#xff0c;“OPPO正式进入AI手机时代”。 春节假期刚过&#xff0c;魅族又公开表示&#xff0c;将停止“传统智能手机…

科研绘图系列:R语言组合堆积图(stacked plot)

文章目录 介绍加载R包数据数据预处理画图1画图2组合图形系统信息介绍 堆积图(Stacked Chart),也称为堆叠图,是一种常用的数据可视化图表,主要用于展示不同类别的数据量在总体中的分布情况。堆积图可以是柱状图、条形图或面积图的形式,其中各个类别的数据量被叠加在一起,…

Node.js 完全教程:从入门到精通

Node.js 完全教程&#xff1a;从入门到精通 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;允许开发者在服务器端使用 JavaScript。它的非阻塞 I/O 和事件驱动架构使得 Node.js 非常适合于构建高性能的网络应用。本文将详细介绍 Node.js 的安装、基本语…

微服务day03

导入黑马商城项目 创建Mysql服务 由于已有相关项目则要关闭DockerComponent中的已开启的项目 [rootserver02 ~]# docker compose down WARN[0000] /root/docker-compose.yml: version is obsolete [] Running 4/4✔ Container nginx Removed …

每日一题之二叉树

已知结点元素值为正整数且值不相同的一棵二叉树。 该二叉树通过给出其先序遍历序列和中序遍历序列构造而成。 输入一个整数x&#xff0c;针对此二叉树编写程序求出x的右子树中所有结点值的和&#xff08;若x不在树上&#xff0c;输出-1&#xff09;。 输入说明&#xff1a;第一…

win10系统使用Visual Studio 2019或cmake编译SDL2为32位库时出现error C2118: 负下标winnt.h的解决方法

提示&#xff1a; 下图蓝体字中的VS2008是错误的&#xff0c;其实SDL.sln是用VS2010版本的软件开发的&#xff08;对于SDL-release-2.0.5.zip源码而言至少是这样&#xff0c;而2024-11-6为止SDL是2.30.9版本了&#xff0c;2.30.9版本则无需自己编译&#xff0c;只需下载带后缀…

推荐一款管道数据检索工具:Pipedata-Pro

Pipedata-Pro是一款专为设计石油、天然气、水和蒸汽管道及管道系统的工程师开发的应用程序。该应用程序提供了设计管道系统所需的工程数据&#xff0c;拥有一个全面的管道类型、配件和材料数据库。 软件特点&#xff1a; 1. 技术参数查询&#xff1a;Pipedata-Pro 提供关于管道…

算法竞赛(Python)-数组

文章目录 一 、排序算法二 、二分查找1 二分查找讲解2 二分查找题目&#xff08;1&#xff09;二分查找&#xff08;2&#xff09;在排序数组中查找元素的第一个和最后一个位置&#xff08;3&#xff09;两数之和 II - 输入有序数组 三、数组双指针1对撞指针对撞指针题目1&…

基于STM32的LCD1602显示Proteus仿真设计(仿真+程序+设计报告+讲解视频)

这里写目录标题 1.主要功能0. 资料清单&下载链接资料下载链接&#xff1a;2.仿真设计3. 程序设计4. 设计报告5. 框图 基于STM32的LCD1602显示Proteus仿真设计(仿真程序设计报告讲解视频&#xff09; 仿真图proteus 8.9 程序编译器&#xff1a;keil 5 编程语言&#xff1a…

SpringBoot项目编译报错 类文件具有错误的版本 61.0, 应为 52.0

springboot项目在编译时报错&#xff1a; /Users/Apple/Developer/art/caicai/cai-api/dubbo-samples/1-basic/dubbo-samples-spring-boot/dubbo-samples-spring-boot-provider/src/main/java/org/apache/dubbo/springboot/demo/provider/ProviderApplication.java:22:32 java…

PVE纵览-备份与快照指南

PVE纵览-备份与快照指南 文章目录 PVE纵览-备份与快照指南摘要1 备份与快照概述定义与区别备份与快照在PVE中的应用场景 2 PVE 备份功能详解备份类型与策略配置备份任务自动化备份管理 3 PVE 快照功能详解快照的工作原理快照的创建与恢复机制快照对系统性能的影响快照的使用场景…

Mac如何实现最简单的随时监测实时运行状态的方法

Mac book有着不同于Windows的设计逻辑与交互设计&#xff0c;使得Mac book有着非常棒的使用体验&#xff0c;但是在Mac电脑的使用时间过长时&#xff0c;电脑也会出现响应速度变慢或应用程序崩溃的情况&#xff0c;当发生的时候却不知道什么原因导致的&#xff0c;想要查询电脑…