现代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.rhkb.cn/news/469742.html

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

相关文章

吾店云介绍 – 中国人的WordPress独立站和商城系统平台

经过多年在WordPress建站领域的摸索和探索&#xff0c;能轻松创建和管理各种类型网站的平台 – 吾店云建站平台诞生了。 应该说这是一个艰苦卓绝的过程&#xff0c;在中国创建一个能轻松创建和使用WordPress网站的平台并不容易&#xff0c;最主要是网络环境和托管软件的限制。…

「QT」几何数据类 之 QLine 整型直线类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…

游戏引擎学习第五天

这节貌似没讲什么 视频参考:https://www.bilibili.com/video/BV1Gmm2Y5EwE/ uint8 *A somewhere in memory; uint8 *B somewhere in memory;//BEFORE WE GOT TO HERE int Y *B; // whatever was actually there before the 5 *A 5; int X *B; // 5 //Obviously! Y and …

uniapp分享功能

页面生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle onShareTimeline 监听用户点击右上角转发到朋友圈 微信小程序 2.8.1 onAddToFavorites 监听用户点击右上角收藏 微信小程序、QQ小程序 2.8.1 onShareAppMessage 用户点击右上角分享 微信小程序、QQ小程…

小程序中引入下载到本地的iconfont字体图标加载不出来问题解决

我这个是uniapp项目,字体图标都是一样的,在vue项目中web端、uniapp运行到h5都没问题,但是运行到小程序加载不出来,报错如下: 不让用本地路径,所以我们要转为base64编码,这里给大家提供一个工具,它可以把本地字体文件转为base64:transfonter 进入官网后,第一步: …

Sql server 备份还原方法

备份 方法1&#xff0c;选择对应的数据库名-------》右键 任务---------》备份 默认备份类型 完整 文件后缀 .bak 方法2,选择对应的数据库名-------》右键 任务----------》生成脚本 选择要编写的数据库对象(表&#xff0c;视图&#xff0c;存储过程等) 选择对应的 服…

中兴光猫修改SN,MAC,修改地区,异地注册,改桥接,路由拨号

前言 请先阅读上一篇博客获取到光猫超级密码电信光猫获取超级密码 电信光猫天翼网关4.0获取超级密码教程 四川电信光猫 中兴 F1855V2 ZXHN F1855V2 telent权限 实战 实测_天翼4.0光猫超级密码-CSDN博客 修改SN-修改地区&#xff0c;光猫异地注册&#xff0c;设置桥接模式&#…

AI大模型开发架构设计(14)——基于LangChain大模型的案例架构实战

文章目录 基于LangChain大模型的案例架构实战1 LangChain 顶层架构设计以及关键技术剖析LangChain 是什么?LangChain的主要功能是什么&#xff1f;LangChain 顶层架构设计LangChain 典型使用场景&#xff1a;QA 问答系统LangChain 顶层架构设计之 Model I/OLangChain 顶层架构…

Ubuntu 的 ROS 操作系统turtlebot3环境搭建

引言 本文介绍如何在Ubuntu系统中为TurtleBot3配置ROS环境&#xff0c;包括安装和配置ROS Noetic的步骤&#xff0c;为PC端控制TurtleBot3提供操作指南。 安装和配置的过程分为PC设置、系统安装、依赖安装等部分&#xff0c;并在最后进行网络配置&#xff0c;确保PC端能够顺利…

009_SSH_Mysql图书管理系统(学生注册 借书 还书 绵阳)——lwplus87(免费送)

Abstract IV 第1章 概述... 1 1.1 课题背景... 1 1.2 课题意义... 1 1.3 文献综述... 2 1.3.1 技术综述... 2 1.4 总体设计原则... 2 第2章 系统分析... 4 2.1 系统的需求分析... 4 2.2 业务流程分析... 5 2.2.1 系统管理员业务流程分析... 5 2.3 数据流程分析... 7 2.3.1 图书…

微服务电商平台课程三:搭建后台服务

前言 上节课,我们一起完成基础环境搭建,这节课, 我们利用上节课搭建我们电商平台.这节课我们采用开源代码进行搭建, 不论大家后续从事什么行业,都要学会站在巨人的肩膀上. 之前所说的,整个微服务平台的技术栈也是非常多的, 由于时间和效果的关系, 我们不可能从每个技术一步一…

解决MySQL中整型字段条件判断禁用不生效的问题

MySQL中&#xff0c;当尝试将整数与字符串进行比较时&#xff0c;数据库可能会尝试将字符串转换为整数。在这种情况下&#xff0c;空字符串会被转换为整数0&#xff0c;所以0 ! 会被解释为0 ! 0&#xff0c;结果自然是false。 在开发过程中&#xff0c;我们经常需要对数据库中的…

大数据技术在金融风控中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 大数据技术在金融风控中的应用 大数据技术在金融风控中的应用 大数据技术在金融风控中的应用 引言 大数据技术概述 定义与原理 发…

微信小程序_模板与配置_day2

一、目标 A. 能够使用WXML模板语法渲染页面结构 B. 能够使用WXSS样式装饰页面结构 C. 能够使用app.json对小程序进行全局性配置 D. 能够使用page.json对小程序页面进行个性化配置 E. 能够知道如何发起网络数据请求 二、目录 A. WXML模板语法 B. WXSS模板样式 C. 全局配置 D.…

网络安全技术在能源领域的应用

摘要 随着信息技术的飞速发展&#xff0c;能源领域逐渐实现了数字化、网络化和智能化。然而&#xff0c;这也使得能源系统面临着前所未有的网络安全威胁。本文从技术的角度出发&#xff0c;探讨了网络安全技术在能源领域的应用&#xff0c;分析了能源现状面临的网络安全威胁&a…

设计模式-七个基本原则之一-单一职责原则 + SpringBoot案例

单一职责原理:(SRP) 面向对象七个基本原则之一 清晰的职责&#xff1a;每个类应该有一个明确的职责&#xff0c;避免将多个责任混合在一起。降低耦合&#xff1a;通过将不同的职责分开&#xff0c;可以降低类之间的耦合度&#xff0c;提高系统的灵活性。易于维护&#xff1a;当…

nvm 安装指定node版本时--list 显示为空

1、安装nvm 2、查看nvm 可安装的list 语句&#xff1a; nvm list available 注&#xff1a; 可能需要安装的不在list 中&#xff0c;可直接 用命令语句 安装指定版本 nvm install 12.18.1 如果安装list 显示为空 找到安装路径下的 settings.txt,最后两行没有的添加上&#x…

[HNCTF 2022 Week1]ret2shellcode-好久不见12

知识点&#xff1a;1.shellcode获取 获取Shellcode的两种方法&#xff1a; 手写&#xff1a;想办法调用execve("/bin/sh",null,null) 传入字符串&#xff1a;/bin///sh 系统调用execve pwntools自动生成&#xff1a; 先指定context.arch"i386/amd64" …

实现3D热力图

实现思路 首先是需要用canvas绘制一个2D的热力图&#xff0c;如果你还不会&#xff0c;请看json绘制热力图。使用Threejs中的canvas贴图&#xff0c;将贴图贴在PlaneGeometry平面上。使用着色器材质&#xff0c;更具json中的数据让平面模型 拔地而起。使用Threejs内置的TWEEN&…