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、computed与watch等。
   • 新的内置组件：Fragment、Teleport、Suspense等。
   • 其他改变：新的生命周期钩子、data选项应始终被声明为一个函数、移除keyCode支持作为v - on的修饰符。

二、创建Vue3工程

1. 基于vue - cli创建：

   • 查看@vue/cli版本，确保在4.5.0以上。
   • 安装或升级@vue/cli。
   • 执行创建命令：vue create vue_test。

2. 基于vite创建（推荐）：

   • vite是新一代前端构建工具，优势包括轻量快速的热重载、对TypeScript、JSX、CSS等支持开箱即用、真正的按需编译等。
   • 创建命令：npm create vue@latest。
   • 具体配置：项目名称、是否添加TypeScript支持、是否添加JSX支持、是否添加路由环境、是否添加pinia环境、是否添加单元测试、是否添加端到端测试方案、是否添加ESLint语法检查等。
   • 自己动手编写一个App组件。
   • 安装官方推荐的vscode插件：Vue Language Features（Volar）、TypeScript Vue Plugin（Volar）。

三、Vue3核心语法

1. Options API与Composition API：
   • Options API的弊端：数据、方法、计算属性等分散在data、methods、computed中，不便于维护和复用。
   • Composition API的优势：用函数的方式更优雅地组织代码，让相关功能的代码更有序地组织在一起。
2. 拉开序幕的setup：
   • setup是Vue3中一个新的配置项，值是一个函数，是Composition API的“表演舞台”，组件中所用的数据、方法、计算属性、监视等均配置在其中。
   • 特点：setup函数返回的对象中的内容可直接在模板中使用；setup中访问this是undefined；setup函数会在beforeCreate之前调用，是“领先”所有钩子执行的。
   • setup的返回值：若返回一个对象，则对象中的属性、方法等在模板中均可直接使用；若返回一个函数，则可以自定义渲染内容。
   • setup与Options API的关系：Vue2的配置中可以访问到setup中的属性、方法，但setup中不能访问到Vue2的配置，如果与Vue2冲突，则setup优先。
   • setup语法糖：可以让我们把setup独立出去，借助vite中的插件可以简化相关操作。
3. ref创建：基本类型的响应式数据：
   • 作用：定义响应式变量。
   • 语法：let xxx = ref(初始值)。
   • 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
   • 注意点：JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可；对于let name = ref(‘张三’)来说，name不是响应式的，name.value是响应式的。
4. reactive创建：对象类型的响应式数据：
   • 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）。
   • 语法：let 响应式对象 = reactive(源对象)。
   • 返回值：一个Proxy的实例对象，简称：响应式对象。
   • 注意点：reactive定义的响应式数据是“深层次”的。
5. ref创建：对象类型的响应式数据：
   • 其实ref接收的数据可以是基本类型、对象类型。
   • 若ref接收的是对象类型，内部其实也是调用了reactive函数。
6. ref对比reactive：
   • 宏观角度看：ref用来定义基本类型数据、对象类型数据；reactive用来定义对象类型数据。
   • 区别：ref创建的变量必须使用.value（可以使用volar插件自动添加.value）；reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
   • 使用原则：若需要一个基本类型的响应式数据，必须使用ref；若需要一个响应式对象，层级不深，ref、reactive都可以；若需要一个响应式对象，且层级较深，推荐使用reactive。
7. toRefs与toRef：
   • 作用：将一个响应式对象中的每一个属性，转换为ref对象。
   • 备注：toRefs与toRef功能一致，但toRefs可以批量转换。
8. computed：
   • 作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。
9. watch：
   • 作用：监视数据的变化（和Vue2中的watch作用一致）。
   • 特点：Vue3中的watch只能监视以下四种数据：ref定义的数据、reactive定义的数据、函数返回一个值（getter函数）、一个包含上述内容的数组。
   • 常见情况：包括监视ref定义的基本类型数据、对象类型数据，监视reactive定义的对象类型数据，监视ref或reactive定义的对象类型数据中的某个属性，监视上述的多个数据。
10. watchEffect：
    • 官网描述：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。
    • watch对比watchEffect：都能监听响应式数据的变化，但监听数据变化的方式不同，watch要明确指出监视的数据，watchEffect不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。
11. 标签的ref属性：
    • 作用：用于注册模板引用。
    • 用在普通DOM标签上，获取的是DOM节点；用在组件标签上，获取的是组件实例对象。
12. props：
    • 定义接口限制每个Person对象的格式，定义自定义类型Persons。
    • 在App.vue中使用props，在Person.vue中接收并限制props的类型、指定默认值和限制必要性。
13. 生命周期：
    • 概念：Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，这些特定的函数统称为生命周期钩子。
    • 规律：生命周期整体分为创建、挂载、更新、销毁四个阶段，每个阶段都有两个钩子，一前一后。
    • Vue2的生命周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
    • Vue3的生命周期：setup、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted。
    • 常用的钩子：onMounted（挂载完毕）、onUpdated（更新完毕）、onBeforeUnmount（卸载之前）。

四、路由

1. 路由组件通常存放在pages或views文件夹，一般组件通常存放在components文件夹；通过点击导航，视觉效果上“消失”了的路由组件，默认是被卸载掉的，需要的时候再去挂载。
2. 路由器工作模式：history模式和hash模式