Vue3通透教程【一】Vue3现状—必然趋势?

news2024/12/23 17:35:08

文章目录

  • 🌟 专栏介绍
  • 🌟 Vue默认版本
  • 🌟 拥抱Vue3的UI
  • 🌟 Vue3显著优势

🌟 专栏介绍

凉哥作为 Vue 的忠诚粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其他框架的巨大优势,有兴趣的伙伴可以看一下 Vue框架背后的故事,随着 Vue 框架不断的被认可,现如今的 Vue 框架已经是前端工程师必备的技能了,记得尤大大开发 Vue 的初衷,为了让自己的开发工作更加便捷,也希望这个框架能让更多人的开发工作变得轻松;现如今 Vue 框架做到了,尤大大做到了,当然在 20 年的 9 月 18 日,Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布!如今已经过去了两年多的时间,更多的公司选择了Vue3技术,所以凉哥也在这个时候为大家出这份专栏,本专栏将帮助大家掌握Vue3+TS技术,提升自己竞争力!

🌟 Vue默认版本

Vue3 版本提供了更好的性能、更小的体积、更好的拥抱TS、用于处理大规模用例的混合 API,并为框架未来的长期迭代奠定了坚实的基础。在 2022 年 1 月份的时候尤大大官宣 Vue3 将于 2022 年 2 月 7 日成为新的默认版本!尤大大公告中提出:“正因为 Vue 是一个社区驱动的项目,才让这一切成为可能。这些项目中的许多都是由社区成员发起,他们后来成为了 Vue 团队的成员。其余的项目最初由我发起,但现在除了核心库之外,几乎都完全由团队维护。随着核心库发布新的大版本,框架的所有其他部分也需要一起同步更新。我们还需要为 Vue 2 用户提供一个升级方案。对于 Vue 这样一个社区驱动的团队来说,这是一个巨大的工程。在 Vue 3 的核心库完成的时候,框架的其他部分要么还在 beta 状态,要么还没有开始适配 Vue 3。当时我们的决定是先发布核心库,这样早期用户可以先用起来,库和上层框架的开发者也可以先适配起来,而我们则继续更新框架的其余部分。在这个过程中,我们依然将 Vue 2 保留为文档和 npm 安装时的默认版本。这是因为我们知道对于大部分用户来说,在 Vue 3 的其余部分完善以前,Vue 2 仍然提供了更一致且完整的体验。“软发布” 的过程比预期要长,但这个时刻终于到了:我们很高兴地宣布,Vue 3 将在 2022 年 2 月 7 日成为新的默认版本。”

其实我们从上面的公告中也能够看出 Vue3 一定是必然趋势,而且经过了这段时间以来我们从行情中也能够看出 Vue3 的优势和趋势,越来越多的前端 JD 中出现 Vue3 未来 Vue3 也将是大趋势,所以刻意出品本专栏来带领大家一起掌握Vue3;

🌟 拥抱Vue3的UI

随着Vue3版本的发布越来越多的UI组件开始适配兼容扩展Vue3的版本了,其实也由此看来Vue3在前端中的地位。那么众多ui框架的拥护也就更能方便我们来学习了,当然我们选择现阶段来学习Vue3也是因为一方面看到了Vue3的必然趋势,二呢也是因为我们目前来说已经有足够多的资料供我们学习,众多的UI库兼容Vue3也在一定程度上降低我们的学习成本;

Element Plus 基于 Vue3,面向设计师和开发者的组件库,可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。 如果您确实需要支持旧版本的浏览器,请自行添加 Babel 和相应的 Polyfill 。由于 Vue 3 不再支持 IE11,Element Plus 也不再支持 IE 浏览器。
在这里插入图片描述

View UI Plus View UI Plus 是 View Design 设计体系中基于 Vue.js 3 的一套 UI 组件库,主要用于企业级中后台系统。View UI Plus 提供了超过 80 个常用底层组件(如 Button、Input、DatePicker等)及业务组件(如 City、Auth、Login 等)

在这里插入图片描述

ant-design-vue 为 Web 应用提供了丰富的基础 UI 组件,我们还将持续探索企业级应用的最佳 UI 实践。从 ant-design-vue 2.x 版本升级到 ant-design-vue 3.x 版本。2.x 版本是为了兼容 Vue 3 开发的兼容版本,他并没有带来很多新的特性,大多数的 API 改变也只是为了更好的兼容 Vue 3。 3.x 版本在性能、易用性、功能上都有了很大的提升,

在这里插入图片描述

Naive UI 起步就是Vue3的组件库,安装开头第一句话便是naive-ui 仅支持 Vue3。如果你在使用 Vue2,可以去看看别的库。 拥抱TS,Naive UI 全量使用 TypeScript 编写,和你的 TypeScript 项目无缝衔接。顺便一提,你不需要导入任何 CSS 就能让组件正常工作。有超过 80 个组件,希望能帮你少写点代码。

在这里插入图片描述

Vant UI Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。Vant4就是适用于Vue3的开发的移动端UI库

在这里插入图片描述

上面也仅仅是罗列了一部分,其实还有很多的UI库都发布了Vue3版本,比如京东的nutui(移动端)、字节跳动的arco-design-vue、腾讯的tdesign-vue-next、vuetify、tdesign-mobile-vue等等UI库,有兴趣的伙伴可以自己多去了解一些;我们知道了众多UI库都拥抱了Vue3,那我们就开始学习我们的Vue3吧!

🌟 Vue3显著优势

如今呢Vue的官方中文文档,默认也是Vue3了,有兴趣的朋友可以看一下 👉 Vue3文档-https://cn.vuejs.org/,并且文档中公告将于23年12月份停止维护Vue2的文档。

在这里插入图片描述

在这里插入图片描述

相比较于Vue2而言Vue3的优势可以概括为:首次渲染更快diff算法更快内存占用更少打包提及更小更好的拥抱TS亮点组合式API,其实学习Vue3最主要的就是学习composition API;

针对于Vue3的composition Api设计理念大家可以看一下 👉 Vue3 设计理念 文档中详细介绍了 Vue3 的组合式API设计、动机目的等内容;大家可以先自己看一下 后续文章中我们会详细讲解,通过本篇文章相信大家了解了Vue3的现状,相信他一定是必然趋势,欢迎各位小伙伴订阅本专栏开启Vue3的学习旅程吧!

本期图书推荐

在这里插入图片描述

原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

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

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

相关文章

现在什么款式运动无线耳机好、最适合运动的无线蓝牙耳机推荐

随着经济越来越好,人们的生活质量提高,我们对健康也是更加重视了。越来越多人开始“动起来”。健康运动,自然少不了专业的运动耳机。一副适合的运动耳机对我们锻炼身体有着事半功倍的作用,那么有哪些品牌值得推荐呢?小…

论文笔记(1):Large Language Models are few(1)-shot Table Reasoners

文章目录AbstractIntroductionRelated worksMethodExperimentdatasetbaselinesresultsmain resultsanalysisLimitationAbstract 已有研究表明,大型语言模型(LLM)在文本的少样本推理中表现excellent,本文证明LLM在表结构的f复杂少样本推理中表现也很comp…

【数据结构基础】树 - 二叉搜索树(BST)

本文主要介绍 二叉树中最基本的二叉查找树(Binary Search Tree),(又:二叉搜索树,二叉排序树)它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空&#xff0…

入门力扣自学笔记233 C++ (题目编号:2319)

2319. 判断矩阵是否是一个 X 矩阵 题目: 如果一个正方形矩阵满足下述 全部 条件,则称之为一个 X 矩阵 : 矩阵对角线上的所有元素都 不是 0 矩阵中所有其他元素都是 0 给你一个大小为 n x n 的二维整数数组 grid ,表示一个正方形…

GitHub2022年十大热门编程语言榜单(上)

全球知名代码托管平台 GitHub发布的2022年GitHub Octoverse年度报告公布了全球最流行的十大编程语言,其中JavaScript蝉联第一,Python位列次席。 编程是技术革新的核心,对于所有的编程开发人员来说,对世界范围内编程语言发展和趋势…

搭WIFI拓扑有感

搭拓扑有感 人类革命,一场N*N的MIMO 关键技术:男女搭配 结婚生子 男女搭配:以搭档为单位调度,节省整体开资,克服短时间的寂寞 CP沟通:在说话间加一个保护间隔,不给对方太大的压力 结婚生子 …

Live800:影响在线客服系统稳定性的因素,有哪些?

稳定性的在线客服系统对企业来说是至关重要的,可以说是企业选择在线客服系统时首要考量的一个因素。一个不稳定的在线客服系统,即使价格再便宜,恐怕也无法满足企业搭建在线客服系统的初衷。想象一下当客户正在咨询问题时,客服系统…

十三、表数据的增、删、改操作

文章目录一、插入数据1.1 使用 INSERT…VALUES 语句插入数据1.2 使用 INSERT…SET 语句插入数据1.3 使用 INSERT...SELECT 语句插入查询结果二、修改(更新)数据三、删除数据3.1 通过 DELETE 语句删除数据3.2 通过 TRUNCATE TABLE 语句删除数据3.3 DELETE 语句和 TRUNCATE TABLE…

爬虫实例(二)—— 爬取高清4K图片

大家好,我是 Enovo飞鱼,今天继续分享一个爬虫案例,爬取高清4K图片,加油💪。 目录 前言 增加异常处理 增加代码灵活性 基本环境配置 爬取目标网站 分析网站页面 具体代码实现 图片下载示例 感谢支持&#x1f6…

ABB机器人设置有效载荷的2种方法具体步骤(直接输入法+自动识别推算法1)

ABB机器人设置有效载荷的2种方法具体步骤(直接输入法+自动识别推算法1) 为什么要设置有效载荷Loaddata? 对于搬运应用的机器人只有设定正确的工具和载荷数据,机器人才能正确的工作; 对于搬运比较重的产品,或工具的重量也比较重,需要设置工具及搬运对象的重心和重量; 对…

如何用ChatGPT高效完成工作

如何用ChatGPT高效完成工作 过完年刚开工,很多人还没有从假期综合症中走出来,不想上班,总想摸鱼,可是手上的工作还是要完成的。都2023年了,是时候让ChatGPT来帮我们完成工作了!本文将教你如何用ChatGPT高效…

Unity-Tcp-网络聊天功能(二): 登录与注册

5.客户端实现注册与登录接口创建好UI接下来定义发给客户端的协议等public class MessageHelper {//发送登录的消息给服务器 1002public void SendLoginMsg(string account, string pwd){LoginMsgC2S msg new LoginMsgC2S();msg.account account;msg.password pwd;var str J…

java程序cpu飙高定位

1 定位过程 CPU飙升问题定位的一般步骤是: 首先通过top指令查看当前占用CPU较高的进程PID查看当前进程消耗资源的线程PID:top -Hp PID通过print命令将线程PID转为16进制,根据该16进制值去打印的堆栈日志内查询,查看该线程所驻留…

Plecs电力电子仿真专业教程-第一季

Plecs电力电子仿真专业教程-第一季 第一章 Plecs是什么? 第一节 Plecs简介 Plecs是瑞士Plexim GmbH公司开发的系统级电力电子仿真软件PLECS。PLECS是一个用于电路和控制结合的多功能仿真软件,尤其适用于电力电子和传动系统。不管您是工业领域中的开发…

Lua 面向对象(详解)

Lua 面向对象(详解) 参考文章: https://blog.csdn.net/linxinfa/article/details/103254828 https://zhuanlan.zhihu.com/p/115159195 https://blog.codingnow.com/cloud/LuaOO https://blog.codingnow.com/2006/06/oo_lua.html Lua的面向对象…

Homekit智能家居DIY-智能插座

WiFi智能插座对于新手接触智能家居产品更加友好,不需要额外购买网关设备 很多智能小配件也给我们得生活带来极大的便捷,智能插座就是其中之一,比如外出忘记关空调,可以拿起手机远程关闭。 简单说就是:插座可以连接wi…

不再一个个试错,这众多的flex属性

流式布局 本篇我们将从流式布局的四大方面入手,旨在认识、了解、以至于掌握其特性及功能。 为什么要用? 在我们抛弃标准流、定位流以及浮动流之后,取而代之的是flex流式布局。以一种更加优雅的方式实现元素布局。 轴的定义 在开始说它的特…

C语言#if、##ifdef、#ifndef的用法详解

假如现在要开发一个C语言程序,让它输出红色的文字,并且要求跨平台,在 Windows 和 Linux 下都能运行,怎么办呢?这个程序的难点在于,不同平台下控制文字颜色的代码不一样,我们必须要能够识别出不同…

2023最新版easyrecovery数据恢复软件免费版测评

大家好,关于easyrecovery数据恢复软件免费版很多朋友都还不太明白,今天小编就来为大家分享关于easyrecovery数据恢复软件免费版下载使用的知识,希望对各位有所帮助! EasyRecovery其实是目前为止我用的最喜欢的一款数据恢复软件&a…

C++string的模拟实现(上篇)

目录 一.命名空间的封装与交换函数模板 1.命名空间的封装与类的定义 2.交换函数模板 二.string类的四个重要默认成员函数 1.构造函数的类外定义: 2.析构函数在类外的定义 3.拷贝构造函数在类外的定义 4.赋值运算符重载在类外的定义 5.关于两个string对象…