动力节点Vue笔记第七章

最新推荐文章于 2024-09-09 20:28:08 发布

Java_Coding1

最新推荐文章于 2024-09-09 20:28:08 发布

阅读量796

点赞数

分类专栏： Java学习路线图前端 Vue 文章标签： vue.js 笔记 javascript 前端 java

本文链接：https://blog.csdn.net/java_coding1/article/details/130292721

版权

本文详细介绍了Vue3的主要变化，包括性能提升、响应式系统由`Object.defineProperty`改为`Proxy`实现、更好地支持TypeScript以及Vue3工程的创建，包括`vue-cli`和`create-vue`的使用。此外，还探讨了Vue3的生命周期、自定义事件、计算属性、响应式数据判断等核心概念，展示了Vue3相对于Vue2的优势和新特性。

摘要由CSDN通过智能技术生成

7 Vue3

7.1 了解Vue3

vue3官网地址
1. https://cn.vuejs.org/
vue3发布时间
1. 2020年9月18日。

翻译：
今天，我们很自豪地宣布Vue.js 3.0“海贼王”正式发布。这个新的主要版本的框架提供了改进的性能、更小的捆绑包大小、更好的TypeScript集成、用于处理大规模用例的新API，以及为框架未来的长期迭代奠定了坚实的基础。
3.0版本代表了两年多的开发工作，包括30多个RFC、2600多个提交、来自99个贡献者的628个拉取请求，以及核心回购之外的大量开发和文档工作。我们要向我们的团队成员表示最深切的感谢，感谢他们接受了这一挑战，感谢我们提出的撤回请求，感谢我们的赞助商和支持者提供的财政支持，感谢广大社区参与我们的设计讨论并为预发布版本提供反馈。Vue是一个为社区创建并由社区支持的独立项目，如果没有您的持续支持，Vue 3.0是不可能实现的。

版本迭代历史
1. https://github.com/vuejs/core/releases
vue3做了哪些改动
1. 最核心的虚拟DOM算法进行了重写。
2. 支持tree shaking：在前端的性能优化中，es6 推出了tree shaking机制，tree shaking就是当我们在项目中引入其他模块时，他会自动将我们用不到的代码，或者永远不会执行的代码摇掉
3. 最核心的响应式由Object.defineProperty修改为Proxy实现。
4. 更好的支持TS（Type Script：TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。）
5. …
vue3比vue2好在哪
2. 翻译：
  1. 与Vue 2相比，Vue 3在捆绑包大小（通过树抖动可轻41%）、初始渲染（快55%）、更新（快133%）和内存使用（少54%）方面都有了显著的性能改进。
Vue3的新特性
1. 新的生命周期钩子
2. 键盘事件不再支持keyCode。例如：v-on:keyup.enter支持，v-on:keyup.13不支持。
3. 组合式API（Composition API）
4. 新增了一些内置组件
5. data必须是一个函数。
6. …

7.2 Vue3工程的创建

7.2.1 vue-cli创建Vue3工程

创建Vue3版本的工程，要求vue-cli最低版本4.5.0
2. 可以使用以下命令升级你的脚手架版本
  1. npm install -g @vue-cli
创建Vue3工程
1. vue create vue3_pro
启动工程
1. 切换到工程根目录。
2. npm run serve

7.2.2 vue-cli创建的vue3项目说明

main.js文件说明

查看App.vue组件

vue3中template标签下可以有多个根标签了。

7.2.3 create-vue创建Vue3工程

create-vue是什么？
1. 和vue-cli一样，也是一个脚手架。
2. vue-cli创建的是webpack+vue项目的脚手架工具。
3. create-vue创建的是vite+vue项目的脚手架工具。
4. webpack和vite都是前端的构建工具。
vite官网
1. https://vitejs.cn/
vite是什么？（vite被翻译为：快）
1. vite是一个构建工具，作者尤雨溪。