Vue-vue3-CFANZ编程社区

一、Vue3简介
二、Vue3有那些优化
三、创建Vue3.0工程
四、Vue3工程结构（使用cli创建的vue3）
五、常用的Composition API（组合式API）
六、其他Composition API
七、Composition API 的优势
- options API 存在的问题
- Composition API 的优势
八、新的组件
- Fragment
- Teleport
九、其他
- 全局API的转移
- 其他改变

一、Vue3简介

2020年9月18日，Vue.js发布3.0版本，代号:One Piece(海贼王)
耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0

二、Vue3有那些优化

性能的提升

打包大小减少41%
初次渲染快55%，更新渲染快133%
内存减少54%

源码升级

使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking

拥抱TypeScript

Vue3可以更好的支持TypeScript

新的特性

Composition API(组合API)
- setup配置
- ref与reactive
- watch与watchEffect
新的内置组件
- Fragment
- Teleport
- Suspense
其他改变
- 新的生命周期钩子
- data 选项应始终被声明为一个函数
- 移除keyCode支持作为 v-on 的修饰符

三、创建Vue3.0工程

使用vue-cli创建

选择第二个
使用vite创建
官方地址：https://v3.cn.vuejs.org/guide/installation.html#vite

## 创建工程
npm init vite-app <project-name>
##进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

四、Vue3工程结构（使用cli创建的vue3）

在这里插入图片描述

五、常用的Composition API（组合式API）

setup

1、Vue3.0中的一个新的配置项，值为一个函数
2、setup是所有CompositionAPI表演的舞台
3、组件中所用到的：数据、方法等等，均需要配置在setup中
4、setup函数有两种返回值

	1.若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注!)
	2.若返回一个渲染函数:则可以自定义渲染内容。(了解)

5、注意点：

1.尽量不要与Vue2.x配置混用
	    Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法
	    但在setup中不能访问到Vue2.x配置(data、methos、computed...)。
		如果有重名，setup优先。
2.setup不能是一个async函数，因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性,

setup的两个注意点

setup执行的时机
- 在beforeCreact之前执行一次，this是undefined
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
- context：上下文对象
  - attr：值为对象，包含：组件外部传递过来，但没有在props中声明的属性，相当于：this.$attrs
  - slots：收到的插槽内容，相当于this.$slots
  - emit：分发自定义事件的函数，相当于this.$emit

ref函数

作用：定义一个响应式的数据
语法：const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象（reference对象）
- JS中操作数据：xxx.value
- 模版中读取数据，不需要.value,直接<div>{{xxx}}</div>
备注：
- 接收的数据可以是基本数据类型，也可以是对象类型
- 基本数据类型：响应式依然靠object.defineProperty()的get与set完成
- 对象类型的数据:内部求助了Vue3.0中的一个新函数一
  reactive 函数。

reactive函数

在这里插入图片描述

Vue3.0中的响应式原理

vue2.x的响应式

在这里插入图片描述

Vue3.0的响应式

在这里插入图片描述

在这里插入图片描述
MDN文档中描述Proxy和Reflect：

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

在这里插入图片描述

reactive对比 ref

从定义的角度
- ref用来定义：基本数据类型
- reactive用来定义对象（或数组）数据类型
- 备注:ref也可以用来定义对象(或数组)类型数据，它内部会自动通过reactive转为代理对象。
从原理的角度
- ref通过object.defineProperty()和get与set来实现响应式（数据劫持）
- reactive通过proxy来实现响应式，并通过reflect操作源对象内部的数据
从使用的角度
- ref定义数据：操作数据需要用.value，读取数据时模版中直接读取不需要.value
- reactive定义的数据：操作数据与读取数据都不需要.value

计算属性与监视

computed函数

与Vue2中的配置功能一致
写法

watch函数

与Vue2中的watch配置是一致的
两个小坑
- 监视reactive定义的响应式数据时，oldValue无法正确获取，强制开启了深度监视（deep配置失效）
- 监视reactive定义的响应式数据中的某个属性时，deep配置有效
情况一
情况二
情况三
情况四
情况五
特殊情况

watchEffect函数

watch的套路是:既要指明监视的属性，也要指明监视的回调。
watchEffect的套路是:不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watchEffect有点像computed:
- 但computed注重计算出来的值（回调函数的返回值）所以必须写返回值
- 而watchEffect更注重过程（回调函数体）所以不用写返回值

自定义hook函数

什么是hook？本质是一个函数，把setup函数中使用的composition API进行封装
类似于vue2中的mixin
自定义hook的优势，复用代码，让setup中的逻辑更清晰
新增一个文件目录hooks

定义：

使用：

toRef（重点）

作用:创建一个ref对象，其value值指向另一个对象中的某个属性。
可以将对象中的属性进行拆解使用
语法:const name =toRef(person,'name')
应用:要将响应式对象中的某个属性单独提供给外部使用时。
扩展:toRefs与toRef功能一致，但可以批量创建多个ref对象，语法:toRefs(person)

六、其他Composition API

shallowReactive与shallowRef

shallowReactive:只处理对象最外层属性的响应式(浅响应式)
shallowRef: 只处理基本数据类型的响应式,不进行对象的响应式处理。
什么时候使用?
- 如果有一个对象数据，结构比较深,但变化时只是外层属性变化 ===>shallowReactive。
- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===>shallowRef。

readonly与shallowReadonly

readonly: 让一个响应式数据变为只读的(深只读)
shallowReadonly:让一个响应式数据变为只读的(浅只读)
应用场景:不希望数据被修改时

toRaw与markRaw

toRaw:
- 作用:将一个由reactive 生成的响应式对象转为普通对象。
- 使用场景:用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新
markRaw:
- 作用:标记一个对象，使其永远不会再成为响应式对象。
- 应用场景:
  - 有些值不应被设置为响应式的，例如复杂的第三方类库等,
  - 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。