vue3学习笔记

一、创建 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.新的特性

1. Composition API（组合 API）

   • setup 配置
   • ref 与 reactive
   • watch 与 watchEffect
   • provide 与 inject
   • …

2. 新的内置组件

   • Fragment
   • Teleport
   • Suspense

3. 其他改变

   • 新的生命周期钩子
   • data 选项应始终被声明为一个函数
   • 移除 keyCode 支持作为 v-on 的修饰符

2.分析项目工程结构

vue2

vue3

首先是分析项目的入口文件 main.js，对比发现，vue3 中引入的不再是 Vue 构造函数了，而是一个名为 createApp 的工厂函数。构造函数与工厂函数最大的区别就是构造函数需要使用 new 关键字调用，而工厂函数不需要。

同时创建应用实例对象时不再是 vm，而是 app，并且 app 身上的属性与方法比 vm 少。

<