惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
Docker
Apple Machine Learning Research
Apple Machine Learning Research
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 三生石上(FineUI控件)
月光博客
月光博客
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
WordPress大学
WordPress大学
Hugging Face - Blog
Hugging Face - Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
M
MIT News - Artificial intelligence
腾讯CDC
B
Blog RSS Feed
H
Help Net Security
J
Java Code Geeks
有赞技术团队
有赞技术团队
Y
Y Combinator Blog
博客园_首页
Last Week in AI
Last Week in AI
博客园 - 【当耐特】
博客园 - Franky
B
Blog
MongoDB | Blog
MongoDB | Blog
博客园 - 叶小钗
Martin Fowler
Martin Fowler

姓王者的博客

Linux用户Secure Boot自主维护指南 | 姓王者的博客 MAD Bugs 已经开始——关于信息安全的军备竞赛 | 姓王者的博客 解决钉钉Dingtalk无法在Linux新版内核上启动问题-修复可执行栈错误 | 姓王者的博客 突发:GitHub 正遭受大规模 Issue 赌博广告轰炸 | 姓王者的博客 Ubuntu26.04-beta体验:坚毅浣熊! | 姓王者的博客 fakeclaw装作龙虾发贴吧 | 姓王者的博客 找回12年前的QQ记忆 | 姓王者的博客 在Linux上玩Flash网页游戏-洛克王国 | 姓王者的博客 Copilot将使用交互数据来训练 | 姓王者的博客 重要通知-请更新我的GPG公钥 | 姓王者的博客 为了自由Android | 姓王者的博客 GPL"2,3"事 | 姓王者的博客 短文-对VitePlus的一点🤏小贡献 | 姓王者的博客 Bing收录没了?亲测有效的快速恢复指南 | 姓王者的博客 解决桌面设备二维码快速识别的工具-ClipQR | 姓王者的博客 解决 Nautilus 自定义终端插件安装依赖问题 | 姓王者的博客 OpenClaw 该熄火了 | 姓王者的博客 Vite8 - 统一的基建开始 | 姓王者的博客 Astro 6 推出啦 | 姓王者的博客 ubuntu的openvpn异常暂停推送更新 | 姓王者的博客 Ubuntu 24.04 安装 Win10 虚拟机 | 姓王者的博客 ESA-后记:热爱阿里云 | 姓王者的博客 Moonbit 0.8.0 重大发布,我也要改一下我的包 | 姓王者的博客 ESA Pages 边缘开发大赛获奖 | 姓王者的博客 Astro: 优化katex,mermaid和灯箱使用 | 姓王者的博客 从edgeone迁移到esa | 姓王者的博客 出租人类:AI时代的荒诞与真实 | 姓王者的博客 Astro 5.17构建性能优化实践:从18s到13s | 姓王者的博客 Moonbit License Checker 开发使用 | 姓王者的博客 Stalux Astro博客主题自荐 | 姓王者的博客
初识Vue3,有趣 | 姓王者的博客
作者:xingwangzhe · 2024-09-27 · via 姓王者的博客

🕒 阅读时间:2 分钟 📝 字数:654 👀 阅读量: Loading...

初识前端工程

Vue3

基础扎实

老三件:html css javascript虽然不敢说熟练吧,但也算是基本掌握,但是我想如果构建前端页面的话,写这些似乎有点太过冗杂,看来前端工程化是必要的!

Vue3是什么

正如它官网介绍的:

易学易用,性能出色,适用场景丰富的 Web 前端框架。

Vue 3是一个重构的Vue.js版本,它带来了更快的性能、更小的体积、更好的TypeScript支持以及全新的Composition API,这些改进让Vue开发更加高效、灵活和可维护。Vue 3通过Proxy实现了更强大的响应式系统,支持更全面的数据监测,并引入了Fragment、Teleport和Suspense等新组件,以及Tree-shaking等优化手段,进一步提升了用户体验和开发效率。同时,Vue 3的生态系统也在不断发展壮大,为开发者提供了更多选择和可能性。

相比于传统开发

性能提升

更快的渲染速度:Vue 3通过优化虚拟DOM算法、响应式系统以及编译器,实现了更快的渲染速度。其中,Vue 3使用了基于Proxy的响应式系统,相比Vue 2的Object.defineProperty,Proxy的代理模式无需深度遍历整个对象,因此性能更高。此外,Vue 3还引入了静态提升(Static Tree Hoisting)和基于Proxy的观察者(Proxy-based Observer),进一步提升了渲染性能。 更小的体积:Vue 3通过Tree-shaking技术和优化打包方式,使得包体积更小,加载速度更快。这有助于减少前端页面的加载时间,提升用户体验。

全新的Composition API

更灵活的代码组织方式:Vue 3引入了Composition API,允许开发者通过函数的方式组织代码,而不是像Vue 2那样通过选项式API来组织。这种方式使得代码更加模块化、可重用和可维护。 更清晰的逻辑复用:Composition API中的setup函数允许开发者将组件的逻辑组织在一起,并通过ref、reactive等函数创建响应式数据,通过computed、watch等函数实现计算属性和侦听器,从而实现了更清晰的逻辑复用。

更好的TypeScript支持

原生支持TypeScript:Vue 3原生支持TypeScript,这使得开发者可以更方便地编写类型安全的代码,减少运行时错误,并提高开发效率。同时,Vue 3也提供了更丰富的TypeScript类型定义和类型推断功能,进一步提升了TypeScript的使用体验。

生态系统的发展

丰富的第三方库和工具:随着Vue 3的发布和普及,其生态系统也在不断发展壮大。现在已经有大量的第三方库和工具支持Vue 3,这为开发者提供了更多的选择和可能性。

改进的开发体验

更简洁的语法:Vue 3的语法相比Vue 2更加简洁明了,去除了一些不常用的功能,使得代码更加易于阅读和维护。 更好的错误处理和调试:Vue 3提供了更强大的错误处理和调试功能,使得开发者可以更快地定位和解决问题。 综上所述,Vue3开发相较于传统前端开发在性能、API设计、TypeScript支持、生态系统以及开发体验等方面都展现出了显著的区别和优势。这些改进使得Vue 3成为构建高性能、高效、可维护的Web应用的强大工具。

我自己的小实现

看b站尚硅谷Vue3入门到实战,最新版vue3+TypeScript前端开发教程动手实现了一下简单的示例,感觉很有趣,等我再熟悉熟悉,看看能不能做个小项目:)