Vue3核心知识

Vue3核心知识

简介

1.性能的提升

打包大小减少41%。

初次渲染快55%, 更新渲染快133%。

内存减少54%。

2.源码的升级

使用Proxy代替defineProperty实现响应式。

重写虚拟DOM的实现和Tree-Shaking。

3.拥抱TypeScript

Vue3可以更好的支持TypeScript。

4.新的特性

Composition API（组合API）

一些新的内置组件

创建工程

基于 vue-cli 创建（不推荐）

基于 vite 创建（推荐）

轻量快速的热重载（HMR），能实现极速的服务启动。

对 TypeScript、JSX、CSS 等支持开箱即用。

真正的按需编译，不再等待整个应用编译完成。

API风格

创建app

创建app：Vue.createApp( )

挂载应用：app.mount( )

定义组件：defineComponent

OptionsAPI 与 CompositionAPI

Options API 的弊端

• 每个功能的：数据、方法、计算属性等，是分散在：data、methods、computed配置中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于代码的维护和复用。

Composition API 的优势

• 可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

setup

setup

setup是什么

• 是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

setup的特点

• setup函数返回的对象中的内容，可直接在模板中使用。
• setup中访问this是undefined。
• setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

setup的参数

• props
• context

• attrs • 一个响应式的属性对象，包含传递给组件的非声明属性。这可以用来处理父组件传递的未在组件中声明的属性。 • slots • 一个插槽函数的对象，可以用来访问组件的插槽内容。 • emit • 一个用于触发自定义事件的函数。可以使用它来在组件内部触发事件，并将数据传递给父组件。 • refs • 一个包含了组件内声明的所有ref对象的属性对象。可以通过refs来访问和修改ref对象的值。

setup的返回值

• 对象

• 对象中的：属性、方法等，在模板中均可以直接使用（重点关注）。

• 函数

• 返回一个模板，可以自定义渲染内容，代码如下（用的不多）。

与Options API的关系

• Vue2 的配置（data、methos......）中可以访问到 setup中的属性、方法。
• 但在setup中不能访问到Vue2的配置（data、methos......）。
• 如果与Vue2冲突，则setup优先。

setup语法糖

响应式数据

ref

基本类型

• let name = ref('张三')

对象类型

• let car = ref({ name:'奔驰' ,price:'50W'})

reactive

对象类型

• let car = reactive({ name:'奔驰' ,price:'50W'})

ref 对比 reactive

ref

• ● 用来定义：基本类型数据、对象类型数据。
• ● 若定义对象类型数据，它内部会自动通过reactive实现响应式。
• ● JS中操作数据需要.value，模板中可以直接读取不需要.value。

reactive

• ● 用来定义：对象类型数据。
• ● 无论JS中还是模板中，均不需要.value。

使用原则：

• ● 若需要一个基本类型的响应式数据，必须使用ref。
• ● 若需要一个响应式对象，层级不深，那么使用ref也可以。
• ● 若需要一个响应式对象，且层级较深，要深度跟踪，那么使用reactive。

计算与监视

computed

//引入computedimport {computed} from 'vue'//创建一个计算属性let fullName = computed({}）

watch

明确：Vue3中的watch只能监视四种数据

• 1. ref对象。
• 2. 响应式对象（reactive定义的对象）。
• 3. 函数返回一个值。
• 4. 一个包含上述内容的数组。

情况一

• 监视ref定义的【基本类型】数据，则默认监视的就是value值。

情况二

• 监视reactive定义的【响应式对象】，注意点有：

• 默认开启了深度监视。 • newValue和oldValue都是新值。

情况三

• 监视reactive定义的【响应式对象】中的某个数据，注意有：

• 1. 若该属性值是依然是【响应式对象】，直接编写即可，且默认开启深度监视。 • 2. 若该属性值不是【响应式对象】，需要写成函数形式，且默认关闭深度监视。 • 3. newValue和oldValue都是新值。

情况四

• 监视ref定义的【对象类型】数据，注意点如下：

• 1. 直接写对象，监视的是对象的地址值，若想监视对象内部的数据，要手动开启深度监视。 • 2. 写对象.value，监视的是对象内部的数据（响应式对象），深度监视自动开启。

情况五

• 监视上述的多个数据

对比Vue2和Vue3响应式原理

Vue2的响应式

核心原理

• ○ 对象: 通过Object.defineProperty对已有属性值的读取、修改进行劫持（监视/拦截）。
• ○ 数组: 通过重写数组的7个变更方法，来实现元素修改的劫持。

存在的问题

• ○ 对象中后添加的属性、或删除已有属性, 界面不会自动更新。
• ○ 直接通过下标替换、添加元素, 界面不会自动更新。

Vue3的响应式

核心原理：

• ○ 通过Proxy拦截对data任意属性的任意操作, 包括属性值的读写, 属性的添加, 属性的删除等。
• ○ 通过 Reflect动态对代理对象的相应属性进行特定的操作。
• 备注：MDN相关文档

• Proxy • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy • Reflect • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

自定义hooks

什么是hook？

本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。

自定义hook的优势

复用代码, 让setup中的逻辑更清楚易懂。

props

新的接收方式（配合TS）

生命周期的改变

Vue2

Vue3

● 有两个被更名：

○ beforeDestroy改名为 beforeUnmount

○ destroyed改名为 unmounted

新的组件

Teleport

在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

Fragment

eleport 是一种能够将我们的组件html结构移动到指定位置的技术。

Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

其他

全局API转移到应用对象

● app.component()

● app.config()

● app.directive()

● app.mount()

● app.unmount()

● app.use()

data选项应始终被声明为一个函数

移除keyCode支持作为 v-on 的修饰符