Vue3核心知识

原创

李才哥

发布于 2023-06-27 08:26:32

2620

发布于 2023-06-27 08:26:32

文章被收录于专栏：李才哥

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是什么

是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