vue3(1)

Vue3.0

• 了解vue3.0：

（1）简要了解

1. Vue.js 3.0“one Piece”正式版再20年9月份发布
2. Vue3支持vue2的大多数特性
3. 更好的支持TS

1. 性能提升

1. 打包大小减少41%
2. 初次渲染快55%，重新渲染快133%
3. 内存减少54%
4. 使用proxy代替defineProperty实现数据响应式
5. 重写虚拟DOM的实现和Tree-Shaking（摇树）

1. 新增特性

1. Composition（组合）API
2. Setup

ref和reactive

computed和watch

新的生命周期函数

provide和inject

1. 新组件

Fragment--文档碎片

Teleport--瞬移组件的位置

Suspense--异步加载组件的loading界面

1. 其他API更新

全局API的修改

将原来的全局API转移到应用对象

模板语法变化

• 创建vue3项目

1. 使用vue-cli创建

npm install -g @vue/cli

vue create project

1. 使用vite创建

vite是一个有原生ESM驱动的web开发构建工具。在开发环境基于浏览器原生ES import开发，他做到了本地快速开发启动，在生产环境下基于Rollup打包

npm install -g create-vite-app

npm init vite-app

cd

npm install

npm run dev

• Composition API

1. Composition API（常用部分）

1. Setup

1. 新的option,所有的组合API函数都在此使用，只在初始化时执行一次，是组合API的入口函数
2. 函数如果返回对象，对象中的属性或方法，模板中可以直接使用

1. ref（是一个函数）

1. 作用：定义一个数据的响应式，返回的是一个ref对象
2. 语法：const xxx = ref(initValue)

js中操作数据：xxx.value

模板中操作数据：不需要.value

1. 一般用来定义一个基本类型的响应式数据

1. reactive

1. 作用：定义多个数据的响应式
2. 语法：const proxy=reactive(obj)：接受一个普通对象然后返回该普通对象的响应式代理器对象
3. 响应式转换是深层的：会影响对象内部所有的嵌套的属性
4. 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据都是响应式的

1. 比较vue2和vue3的响应式（重要）

Vue2的响应式：

1. 核心：对象：通过defineProperty对对象的已有属性值的读取和修改进行劫持（监视、拦截）

  数组：通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

1. 问题：对象直接新添加的属性或删除已有属性，界面不会自动更新

  直接通过下标替换元素或更新length，界面不会自动更新arr[1]={}

Vue3的响应式

1. 核心：通过Proxy代理：拦截对data任意属性的任意（13种）操作，包括属性值的读写，属性的添加，属性的删除等...

  通过Reflect反射：动态对被代理对象的相应属性进行特定的操作

1. setup细节

1. setup执行的时机：

1、在beforeCreate之前执行一次，此时组件对象还没有创建

2、this是undefined，不能通过this来访问data/computed/methods/props

3、其实所有的composition API相关回调函数中也都不可以

1. setup的返回值

1、一般都是返回一个对象，内部的属性和方法是给html模板使用的

2、setup返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性

3、setup返回对象中的方法会与methods中的方法合并成为组件对象的方法

4、Vue3中尽量不要混合使用data和setup及methods和setup（因为methods中可以访问setup提供的属性和方法，但是在setup中不能访问data和methods）

5、setup不能是一个async函数：因为返回值不再是return的对象，而是promise.模板看不到return对象中的属性数据

1. setup的参数

1、setup(props,context)/setup(props,{attrs,slots,emit})

2、props：是一个对象，里面有父组件向子组件传递的数据，并且是在子组件中使用props接收到的所有属性

3、Context：是一个对象，里面有attrs对象，emit方法，slot对象

4、attrs：获取当前组件标签上的所有属性，但是该属性是在props中没有声明接收的所有对象，相当于this.$attrs

5、slots：包含所有传入的插槽内容的对象，相当于this.$slots

6、emit：用来分发自定义事件的函数，相当于this.$emit

1. reactive与ref细节

1. 是vue3的composition API中的2个重要的响应式API
2. ref用来处理基本类型数据，reactive用来处理对象（递归深度响应式）
3. 如果用ref对象/数组，内部会自动将对象/数组转换为reactive的Proxy代理对象
4. ref内部：通过给value属性添加getter/setter来实现对数据的劫持
5. reactive内部：通过使用Proxy来实现对对象内部所有数据的劫持，并通过Reflect操作对象内部数据
6. ref的数据操作：在js中要.value，在模板中不需要（内部解析模板时会自动添加.value）

1. 计算属性与监视

1. computed函数：

1、与computed配置功能一致

2、只有getter

3、有getter和setter

1. watch函数

1、与watch配置功能一致

2、监视指定的一个或多个响应式数据，一旦数据变化，就自动执行监听回调

3、默认初始时不执行回调，但可以通过配置immediate为true，来指定初始时立即执行第一次

4、通过配置deep为true，来指定深度监视

1. watchEffect函数

1、不用直接指定要监视的数据，回调函数中使用的哪些响应式数据就监视哪些响应式数据

2、默认初始时就会执行第一次，从而可以收集需要监视的数据

3、监视数据发生变化时回调

（8）生命周期

1. 与2.x版本生命周期相对应的组合式API

1. 新增的钩子函数

组合式API还提供了以下调试钩子函数：onRenderTracked和onRenderTriggered

（9）自定义hook函数

1. 使用vue3的组合API封装的可复用的功能函数
2. 自定义hook的作用类似于vue2中的mixin技术
3. 自定义hook的优势：很清楚复用功能代码的来源，更清楚易懂

1. toRefs

把一个响应式对象转换成普通对象，该普通对象的每个property都是一个ref

应用：当从合成函数返回响应式对象时，toRefs非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用

问题：reactive对象取出的所有属性值都是非响应式的

解决：利用toRefs可以将一个响应式reactive对象的所有原始属性转换为响应式的ref属性

1. ref获取元素

利用ref函数获取组件中的标签元素

功能需求：让输入框自动获取焦点