VUE3【实用教程】（2024最新版）

VUE3 概述

Vue 2 已于 2023 年 12 月 31 日停止维护，请用 Vue 3

vue3 的优势

  • 性能更好
  • 体积更小
  • 更好的 TS 支持
  • 更好的代码组织
  • 更好的逻辑抽离
  • 更多新功能

vue3 升级的新功能

https://sunshinehu.blog.csdn.net/article/details/137834437

API 风格

vue3 有两种API 风格 ：选项式 API 和 组合式 API

vue 2 即选项式 API，vue3 新增了组合式 API （Composition API ），为解决复杂业务逻辑而设计。

组合式 API 优势

  • 更好的代码组织
  • 更好的逻辑复用
  • 更好的类型推导

应该使用组合式 API 还是选项式 API ?

  • 不建议共用，会引起混乱
  • 小型项目、业务逻辑简单，用 Options API 选项式 API
  • 中大型项目、逻辑复杂，用 Composition API 组合式 API

搭建开发环境

官网和nvm下载切换最新版node，修改node下载源，创建项目，启动项目，安装vscode插件Vue - Official
https://blog.csdn.net/weixin_41192489/article/details/136752790

应用配置

  • 捕获所有子组件上的错误
    src/main.ts
    app.config.errorHandler = (err) => {/* 处理错误 */
}
在这里插入代码片

VUE3 基础

单文件组件 SFC

SFC的优点、缺点、使用场景、原理、使用预处理器、＜script setup＞语法详解、资源拆分
https://blog.csdn.net/weixin_41192489/article/details/140466279

声明响应式状态

ref，reactive，toRef()，toRefs() 等
https://blog.csdn.net/weixin_41192489/article/details/138234529

文本插值 {{ }}

响应式变量 msg 通过 {{ }} 在模板中渲染（ 解释为纯文本 ），当 msg 的值发生改变时，会触发模板重新渲染。

<span>Message: {{ msg }}</span>

{{ }} 中还可以是

  • 表达式

  • 返回一个值的，无副作用（不会改变响应式变量）的函数

    {{ formatDate(date) }}

计算属性 computed

https://blog.csdn.net/weixin_41192489/article/details/140517202

指令 v-

https://blog.csdn.net/weixin_41192489/article/details/140473239

生命周期

生命周期钩子 vs 生命周期选项 vs 缓存实例的生命周期
https://blog.csdn.net/weixin_41192489/article/details/137813685

面试技巧：在回答有哪些生命周期时，附带主动说出各自生命周期的使用场景。

侦听器 watch

自动侦听 watchEffect()，$watch，手动停止侦听器
https://blog.csdn.net/weixin_41192489/article/details/137930356

组件

父子组件传值，自定义事件，插槽，动态组件等
https://blog.csdn.net/weixin_41192489/article/details/138502548

状态管理 Pinia

状态持久化 pinia-plugin-persistedstate，异步Action，storeToRefs()，修改State的 $patch，$reset
https://blog.csdn.net/weixin_41192489/article/details/140093389

VUE3 进阶

插件 Plugins

https://blog.csdn.net/weixin_41192489/article/details/140567578

渲染函数 & JSX

https://cn.vuejs.org/guide/extras/render-function.html

自定义元素

https://cn.vuejs.org/guide/extras/web-components.html#vue-and-web-components

VUE3 拓展

vue3 中借助 tsx 使用 JSX

https://sunshinehu.blog.csdn.net/article/details/128584413

VUE3 原理

vue 应用的创建过程

  1. 创建 / 导入根组件
    每个应用都需要一个“根组件”，其他组件将作为其子组件。

    import App from './App.vue'

  2. 通过 createApp 函数创建应用实例

    import { createApp } from 'vue'

    const app = createApp(App)

  3. 调用了 .mount() 方法挂载应用

    <!-- index.html 中用于挂载 vue 应用的元素 -->
<div id="app"></div>

    app.mount('#app')

    mount 的参数为一个实际的 DOM 元素或是一个 CSS 选择器字符串。

    • 被挂载的元素不会被视为应用的一部分。
    • mount 的返回值是根组件实例而非应用实例

MVVM、响应式、模板编译、虚拟节点 vDom、diff 算法

https://blog.csdn.net/weixin_41192489/article/details/137124469

Proxy 实现响应式

https://sunshinehu.blog.csdn.net/article/details/138497769

vue3 比 vue2 快的原因

https://blog.csdn.net/weixin_41192489/article/details/137953238

vue3 与 vue 2 的 diff 算法的区别

  • Vue2 的 updateChildren 是双端比较，Vue3 的 updateChildren 增加了“最长递增子序列” (更快 )
  • Vue3 增加了 patchFlag、静态提升、函数缓存等

h 函数

https://sunshinehu.blog.csdn.net/article/details/128575335

手写 vue3

  • 手写 vue3 的 ref，reactive 和 watchEffect
    https://sunshinehu.blog.csdn.net/article/details/139598940
  • 自定义 v-model
    https://sunshinehu.blog.csdn.net/article/details/139473076

VUE3 性能优化

  • 渲染列表时加 key
  • 及时销毁自定义事件、DOM 事件
  • 合理使用异步组件
  • 使用服务端渲染 SSR
  • webpack 中使用 production，打包时自动删掉调试代码
  • 前端通用的性能优化，如图片懒加载等
    https://blog.csdn.net/weixin_41192489/article/details/136497854

VUE3 提效

vscode 快捷生成 vue3 模板

https://sunshinehu.blog.csdn.net/article/details/140006775

自动路由 unplugin-vue-router

https://sunshinehu.blog.csdn.net/article/details/140007831

全局布局 vite-plugin-vue-layouts

https://sunshinehu.blog.csdn.net/article/details/140016698

自动导入框架方法 unplugin-auto-import

https://sunshinehu.blog.csdn.net/article/details/140018292

自动注册组件 unplugin-vue-components

https://sunshinehu.blog.csdn.net/article/details/140019854

使用 CSS 框架 UnoCSS

https://sunshinehu.blog.csdn.net/article/details/140034188

使用 VueUse 工具库

https://sunshinehu.blog.csdn.net/article/details/140121033

VUE3 封装 HOOK

组合式 API 通过仿 react 中的 hook 实现逻辑复用，流程如下：

  1. 抽离逻辑代码到一个函数
  2. 函数命名约定为 useXxxx格式 (React Hooks 也是 )
  3. 在 setup 中引用 useXxx 函数

实战范例：

  • useTitle
    https://sunshinehu.blog.csdn.net/article/details/139838689
  • useLocation
    https://sunshinehu.blog.csdn.net/article/details/139486731
  • useMousePosition
    https://blog.csdn.net/weixin_41192489/article/details/137875217

VUE3 封装组件

  • “心跳“ 组件
    https://sunshinehu.blog.csdn.net/article/details/139478609

VUE3 实战

  • 从零开始搭建项目
    https://sunshinehu.blog.csdn.net/article/details/139983777

  • 语义化首页布局
    https://sunshinehu.blog.csdn.net/article/details/140215515

  • 来回拖拽放置图片
    https://sunshinehu.blog.csdn.net/article/details/140202135

  • 可撤销重做的 input 输入框
    https://blog.csdn.net/weixin_41192489/article/details/139418350

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

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

相关文章

智能合约语言（eDSL）—— 并行化方案——调度算法

智能合约语言（eDSL）—— 并行化方案——调度算法

3、调度算法 处理区块的时候，我们会同时启动多个线程去执行多个交易，这个时候我们需要一个良好的调度策略，来决定当前的线程是应该执行交易还是验证交易、提前结束还是立刻重新执行交易等，只有有一个良好调度策略才能保证所有交易都稳定有序的执行； 线程数量 这是一个不…
阅读更多...
【Android】常用基础布局

【Android】常用基础布局

布局是一种可用于放置很多控件的容器&#xff0c;它可以按照一定的规律调整内部控件的位置&#xff0c;从而编写出精美的界面&#xff0c;布局内不单单可以放控件&#xff0c;也可以嵌套布局&#xff0c;这样可以完成一些复杂的界面&#xff0c;下面就来认识一些常用的布局吧。…
阅读更多...
价格较低，功能最强？OpenAI 推出 GPT-4o mini，一个更小、更便宜的人工智能模型

价格较低，功能最强？OpenAI 推出 GPT-4o mini，一个更小、更便宜的人工智能模型

OpenAI美东时间周四推出“GPT-4o mini”&#xff0c;入局“小而精”AI模型竞争&#xff0c;称这款新模型是“功能最强、成本偏低的模型”&#xff0c;计划今后整合图像、视频、音频到这个模型中。 OpenAI表示&#xff0c;GPT-4o mini 相较于 OpenAI 目前最先进的 AI 模型更加便…
阅读更多...
MOGONET：患者分类与biomarker识别

MOGONET：患者分类与biomarker识别

为了充分利用组学技术的进步并更全面地了解人类疾病&#xff0c;需要新的计算方法来综合分析多种类型的组学数据。多组学图卷积网络 (MOGONET&#xff0c;Multi-Omics Graph cOnvolutional NETworks)是一种用于生物医学分类的新型多组学整合方法。MOGONET 包含特定组学的学习和…
阅读更多...
SpringBoot整合Swagger报错：Failed to start bean ‘documentationPluginsBootstrapper

SpringBoot整合Swagger报错：Failed to start bean ‘documentationPluginsBootstrapper

文章目录 1 问题背景2 问题原因3 修改SpringBoot配置文件 application.properties参考 1 问题背景 Swagger是SpringBoot中常用的API文档工具&#xff0c;在刚接触使用的时候&#xff0c;按照通用的代码进行配置&#xff0c;发现报错了 [main] ERROR org.springframework.boot…
阅读更多...
2024-7-19 IT新闻

2024-7-19 IT新闻

目录 微软蓝屏 全球IT支出持续增长 科技行业裁员动态 微软蓝屏 事件概述&#xff1a; 2024年7月19日&#xff0c;微软系统遭遇技术故障&#xff0c;导致全球性信息技术中断事件。这场事件对全球多个行业造成了广泛影响&#xff0c;包括航空、银行、医疗、交通等多个关键领域…
阅读更多...
Java枚举的一些易忽视点

Java枚举的一些易忽视点

1、和equals方法 枚举相等比较中&#xff0c;和equals方法没有任何区别&#xff0c;查看源码你会发现&#xff0c;equals方法的实现就是通过判断的。 2、compareTo方法 Enum类的compareTo方法比较的其实是枚举的顺序大小&#xff0c;所以先定义的枚举项要“小于”后定义的枚…
阅读更多...
MySQL实现主从复制的步骤，包括配置读写分离的方法。—— 慧哥充电桩开源平台

MySQL实现主从复制的步骤，包括配置读写分离的方法。—— 慧哥充电桩开源平台

下载源码 【慧哥开源充电桩平台】 https://liwenhui.blog.csdn.net/article/details/134773779?spm1001.2014.3001.5502 MySQL主从复制是一种常见的数据备份和读写分离策略。下面是实现MySQL主从复制的步骤&#xff1a; 配置主服务器&#xff08;Master&#xff09;&#xff1…
阅读更多...
【Android】Fragment的静态动态创建以及两种创建方式的生命周期

【Android】Fragment的静态动态创建以及两种创建方式的生命周期

参考&#xff1a; 33.3-Fragment的创建-静态创建2_哔哩哔哩_bilibili Fragment的创建_从现有代码创建foutran-CSDN博客 【Android】Fragment的基本用法、Fragment和活动间的通信、Fragment的生命周期、动态加载布局的技巧_android fragment-CSDN博客 文章目录 Fragment的静态创…
阅读更多...
linux LED代码设计

linux LED代码设计

设计目标&#xff1a; 写RGB LED灭、亮、闪烁等效果&#xff0c;不同颜色也需要设置 #include <iostream> #include <unistd.h> // 对于usleep() #include <fcntl.h> // 对于open(), close() #include <sys/ioctl.h> // 对于ioctl() #include <li…
阅读更多...
C++案例四：简易记事本程序

C++案例四：简易记事本程序

文章目录 程序介绍代码说明包含必要的头文件主函数定义变量定义主循环显示菜单和读取选择处理用户选择程序介绍 编写一个简单的记事本程序，可以帮助用户添加和查看笔记。这个案例可以练习C++中的输入输出、向量（std::vector）、字符串处理（std::string）、以及简单的控制结…
阅读更多...
各种复现，保证质量

各种复现，保证质量

代码复现&#xff0c;文献复现&#xff0c;模型复现&#xff0c;算法复现&#xff0c;文章复现&#xff0c;创新点等等&#xff0c;python/matlab/c语言/r语言均可&#xff0c;保证高质量完成&#xff0c;可接急单&#xff0c;不成功不收费&#xff01;
阅读更多...
前端小知识点——按钮之间出现很小的空隙如何规避

前端小知识点——按钮之间出现很小的空隙如何规避

前端小知识点——按钮之间出现很小的空隙如何规避 文章介绍问题再现总结 文章介绍 本文主要介绍页面中两个按钮相邻时会出现一点空隙&#xff0c;导致在后续自定义填充的时候出现换行或其它问题&#xff0c;特此记录。 问题再现 这个图片能看到我们给外面的div设置的是300的宽…
阅读更多...
discuz手机版发帖提示“网络出现问题，请稍后再试”

discuz手机版发帖提示“网络出现问题，请稍后再试”

大家好&#xff0c;我是网创有方。今天分享一个discuz发帖报错的问题。 问题描述&#xff1a;discuz手机网页端发帖提示“网络出现问题&#xff0c;请稍后再试”&#xff0c;但是实际上帖子已经发布成功。 本次记录下分析过程&#xff1a; 第一步&#xff1a;打开宝塔&#…
阅读更多...
C++：左值/右值引用、移动语义/std::move、万能引用/完美转发std::forward 详解

C++：左值/右值引用、移动语义/std::move、万能引用/完美转发std::forward 详解

你能学到 左值 与 右值左值引用 与 右值引用 基本用法与作用拷贝构造函数 与 移动构造函数移动语义 与 std::move万能引用 与 引用折叠完美转发&#xff1a;std::forward 前言 本文代码片段中变量命名规则如下&#xff1a; 小写字母&#xff1a;一般类型的变量&#xff08;非…
阅读更多...
egret 白鹭的编译太慢了 自己写了一个

egret 白鹭的编译太慢了 自己写了一个

用的swc 他会检测git的改变 const simpleGit require(simple-git); const fs require(fs); const path require(path); // 初始化 simple-git const swc require(swc/core); const baseDir D:\\project; const gameDir game\\module\\abcdefg; const gitDir D:\\projec…
阅读更多...
Linux_线程的使用

Linux_线程的使用

目录 1、线程与进程的关系 2、线程的优缺点 3、创建线程 4、查看启动的线程 5、验证线程是共享地址空间的 6、pthread_create的重要形参 6.1 线程id 6.2 线程实参 7、线程等待 8、线程退出 9、线程取消 10、线程tcb 10.1 线程栈 11、创建多线程 12、__th…
阅读更多...
VS2019安装MFC组件

VS2019安装MFC组件

VS2019支持的MFC版本是mfc140 ~ mfc142版本&#xff0c;它兼容VS2015、VS2017之前的老版本程序。 一、MFC的历史版本 MFC的历史版本如下&#xff1a; IDE发布时间工具集版本MSC_VERMSVCMFC版本dllVisual C6.01998V601200MSVC6.06.0mfc42.dll、mfcce400.dllVisual Studio 2002…
阅读更多...
【面试题】手撕缓存LRU

【面试题】手撕缓存LRU

设计LRU(最近最少使用)缓存结构&#xff0c;该结构在构造时确定大小&#xff0c;假设大小为K&#xff0c;并有如下两个功能 put(key, value)&#xff1a;将记录(key, value)插入该结构get(key)&#xff1a;返回key对应的value值 对于put(key, value)来说&#xff0c;我们需要…
阅读更多...
如何设计数据中心100G网络光纤布线

如何设计数据中心100G网络光纤布线

随着全球企业对带宽的需求呈指数级增长&#xff0c;数据中心需要升级以增强其计算、存储和网络能力。数据中心从10G/25G向100G迁移成为必然趋势。随着网络升级&#xff0c;数据中心的光纤布线系统也需要随之优化。本文将指导您如何设计数据中心100G网络光纤布线。 100G以太网的…
阅读更多...
最新文章

Copyright @ 2022~2023