一、创建 vue3 工程
对前端感兴趣的可以关注一下我的博客,会持续更新前端相关的知识和学习笔记,一起学习。
说明:vue2与vue3的学习都是跟随B站尚硅谷张天禹老师学习的。
与 vue2 相同,使用 vue create 项目名字 初始化,但配置选择 vue3
1.Vue3 带来了什么
1.性能的提升
-
打包大小减少 41%
-
初次渲染快 55%, 更新渲染快 133%
-
内存减少 54%
2.源码的升级
-
使用 Proxy 代替 defineProperty 实现响应式
-
重写虚拟 DOM 的实现和 Tree-Shaking
…
3.拥抱 TypeScript
- Vue3 可以更好的支持 TypeScript
4.新的特性
-
Composition API(组合 API)
- setup 配置
- ref 与 reactive
- watch 与 watchEffect
- provide 与 inject
- …
-
新的内置组件
- Fragment
- Teleport
- Suspense
-
其他改变
- 新的生命周期钩子
- data 选项应始终被声明为一个函数
- 移除 keyCode 支持作为 v-on 的修饰符
2.分析项目工程结构
vue2
vue3
首先是分析项目的入口文件 main.js,对比发现,vue3 中引入的不再是 Vue 构造函数了,而是一个名为 createApp 的工厂函数。构造函数与工厂函数最大的区别就是构造函数需要使用 new 关键字调用,而工厂函数不需要。
同时创建应用实例对象时不再是 vm,而是 app,并且 app 身上的属性与方法比 vm 少。
然后是 App 组件,vue3 与 vue2 不同,vue3 组件中的模板结构可以没有根标签
vue2