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

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

news 来源：原创 2024/9/20 4:34:45

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

路由管理 Vue Router

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

状态管理 Pinia

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

VUE3 进阶

组合式函数

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

自定义指令

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

插件 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 内置组件

无需注册，可直接使用

Transition

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

TransitionGroup

https://cn.vuejs.org/guide/built-ins/transition-group.html

KeepAlive

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

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 函数

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

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • PyTorch构建一个肺部CT图像分类模型来分辨肺癌
  • 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【29】Sentinel
  • 生成式AI未来趋势预测
  • 系统架构设计师①：计算机组成与体系结构
  • 【数据结构】堆的实现以及建堆算法和堆排序
  • Unity UGUI 之 图集
  • 【精品资料】数据安全治理解决方案（27页PPT）
  • Electron 和 React 开发桌面应用程序
  • CPU与IO设备交互
  • 什么是服务器带宽
  • vue+watermark-dom实现页面水印效果
  • ESP32CAM人工智能教学15
  • React中Hooks几个有用的 ref
  • go语言Gin框架的学习路线(八)
  • 基于3D开发引擎HOOPS平台的大型三维PLM系统的设计、开发与应用
  • .pyc 想到的一些问题
  • C# 免费离线人脸识别 2.0 Demo
  • Effective Java 笔记（一）
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • js对象的深浅拷贝
  • node入门
  • Puppeteer：浏览器控制器
  • ReactNativeweexDeviceOne对比
  • win10下安装mysql5.7
  • 第13期 DApp 榜单 ：来，吃我这波安利
  • 二维平面内的碰撞检测【一】
  • 翻译：Hystrix - How To Use
  • 分享几个不错的工具
  • 观察者模式实现非直接耦合
  • 汉诺塔算法
  • 前端设计模式
  • 前端学习笔记之观察者模式
  • 如何编写一个可升级的智能合约
  • 手写双向链表LinkedList的几个常用功能
  • 腾讯视频格式如何转换成mp4 将下载的qlv文件转换成mp4的方法
  • 王永庆：技术创新改变教育未来
  • 小程序开发之路（一）
  • 400多位云计算专家和开发者，加入了同一个组织 ...
  • 长三角G60科创走廊智能驾驶产业联盟揭牌成立，近80家企业助力智能驾驶行业发展 ...
  • # centos7下FFmpeg环境部署记录
  • # Redis 入门到精通（七）-- redis 删除策略
  • #100天计划# 2013年9月29日
  • (AngularJS)Angular 控制器之间通信初探
  • (附源码)springboot金融新闻信息服务系统 毕业设计651450
  • （三）Honghu Cloud云架构一定时调度平台
  • （三）Pytorch快速搭建卷积神经网络模型实现手写数字识别(代码+详细注解)
  • （四）汇编语言——简单程序
  • (太强大了) - Linux 性能监控、测试、优化工具
  • （一）SvelteKit教程：hello world
  • （译）计算距离、方位和更多经纬度之间的点
  • （转）项目管理杂谈-我所期望的新人
  • .Net+SQL Server企业应用性能优化笔记4——精确查找瓶颈
  • .netcore 如何获取系统中所有session_如何把百度推广中获取的线索（基木鱼，电话，百度商桥等）同步到企业微信或者企业CRM等企业营销系统中...
  • .NET基础篇——反射的奥妙
  • .NET牛人应该知道些什么(2)：中级.NET开发人员