一、Vue3简介
- 性能提升:
- 打包大小减少41%。
- 初次渲染快55%,更新渲染快133%。
- 内存减少54%。
- 源码升级:
- 使用Proxy代替defineProperty实现响应式。
- 重写虚拟DOM的实现和Tree - Shaking。
- 拥抱TypeScript:Vue3可以更好地支持TypeScript。
- 新特性:
- Composition API(组合API):包括setup、ref与reactive、computed与watch等。
- 新的内置组件:Fragment、Teleport、Suspense等。
- 其他改变:新的生命周期钩子、data选项应始终被声明为一个函数、移除keyCode支持作为v - on的修饰符。
二、创建Vue3工程
基于vue - cli创建:
- 查看@vue/cli版本,确保在4.5.0以上。
- 安装或升级@vue/cli。
- 执行创建命令:vue create vue_test。
基于vite创建(推荐):
- vite是新一代前端构建工具,优势包括轻量快速的热重载、对TypeScript、JSX、CSS等支持开箱即用、真正的按需编译等。
- 创建命令:npm create vue@latest。
- 具体配置:项目名称、是否添加TypeScript支持、是否添加JSX支持、是否添加路由环境、是否添加pinia环境、是否添加单元测试、是否添加端到端测试方案、是否添加ESLint语法检查等。
- 自己动手编写一个App组件。
- 安装官方推荐的vscode插件:Vue Language Features(Volar)、TypeScript Vue Plugin(Volar)。
三、Vue3核心语法
- Options API与Composition API:
- Options API的弊端:数据、方法、计算属性等分散在data、methods、computed中,不便于维护和复用。
- Composition API的优势:用函数的方式更优雅地组织代码,让相关功能的代码更有序地组织在一起。
- 拉开序幕的setup:
- setup是Vue3中一个新的配置项,值是一个函数,是Composition API的“表演舞台”,组件中所用的数据、方法、计算属性、监视等均配置在其中。
- 特点:setup函数返回的对象中的内容可直接在模板中使用;setup中访问this是undefined;setup函数会在beforeCreate之前调用,是“领先”所有钩子执行的。
- setup的返回值:若返回一个对象,则对象中的属性、方法等在模板中均可直接使用;若返回一个函数,则可以自定义渲染内容。
- setup与Options API的关系:Vue2的配置中可以访问到setup中的属性、方法,但setup中不能访问到Vue2的配置,如果与Vue2冲突,则setup优先。
- setup语法糖:可以让我们把setup独立出去,借助vite中的插件可以简化相关操作。
- ref创建:基本类型的响应式数据:
- 作用:定义响应式变量。
- 语法:let xxx = ref(初始值)。
- 返回值:一个RefImpl的实例对象,简称ref对象或ref,ref对象的value属性是响应式的。
- 注意点:JS中操作数据需要:xxx.value,但模板中不需要.value,直接使用即可;对于let name = ref(‘张三’)来说,name不是响应式的,name.value是响应式的。
- reactive创建:对象类型的响应式数据:
- 作用:定义一个响应式对象(基本类型不要用它,要用ref,否则报错)。
- 语法:let 响应式对象 = reactive(源对象)。
- 返回值:一个Proxy的实例对象,简称:响应式对象。
- 注意点:reactive定义的响应式数据是“深层次”的。
- ref创建:对象类型的响应式数据:
- 其实ref接收的数据可以是基本类型、对象类型。
- 若ref接收的是对象类型,内部其实也是调用了reactive函数。
- ref对比reactive:
- 宏观角度看:ref用来定义基本类型数据、对象类型数据;reactive用来定义对象类型数据。
- 区别:ref创建的变量必须使用.value(可以使用volar插件自动添加.value);reactive重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换)。
- 使用原则:若需要一个基本类型的响应式数据,必须使用ref;若需要一个响应式对象,层级不深,ref、reactive都可以;若需要一个响应式对象,且层级较深,推荐使用reactive。
- toRefs与toRef:
- 作用:将一个响应式对象中的每一个属性,转换为ref对象。
- 备注:toRefs与toRef功能一致,但toRefs可以批量转换。
- computed:
- 作用:根据已有数据计算出新数据(和Vue2中的computed作用一致)。
- watch:
- 作用:监视数据的变化(和Vue2中的watch作用一致)。
- 特点:Vue3中的watch只能监视以下四种数据:ref定义的数据、reactive定义的数据、函数返回一个值(getter函数)、一个包含上述内容的数组。
- 常见情况:包括监视ref定义的基本类型数据、对象类型数据,监视reactive定义的对象类型数据,监视ref或reactive定义的对象类型数据中的某个属性,监视上述的多个数据。
- watchEffect:
- 官网描述:立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行该函数。
- watch对比watchEffect:都能监听响应式数据的变化,但监听数据变化的方式不同,watch要明确指出监视的数据,watchEffect不用明确指出监视的数据(函数中用到哪些属性,那就监视哪些属性)。
- 标签的ref属性:
- 作用:用于注册模板引用。
- 用在普通DOM标签上,获取的是DOM节点;用在组件标签上,获取的是组件实例对象。
- props:
- 定义接口限制每个Person对象的格式,定义自定义类型Persons。
- 在App.vue中使用props,在Person.vue中接收并限制props的类型、指定默认值和限制必要性。
- 生命周期:
- 概念:Vue组件实例在创建时要经历一系列的初始化步骤,在此过程中Vue会在合适的时机,调用特定的函数,这些特定的函数统称为生命周期钩子。
- 规律:生命周期整体分为创建、挂载、更新、销毁四个阶段,每个阶段都有两个钩子,一前一后。
- Vue2的生命周期:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
- Vue3的生命周期:setup、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted。
- 常用的钩子:onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)。
四、路由
- 路由组件通常存放在pages或views文件夹,一般组件通常存放在components文件夹;通过点击导航,视觉效果上“消失”了的路由组件,默认是被卸载掉的,需要的时候再去挂载。
- 路由器工作模式:history模式和hash模式