vue3学习

1.使用vite创建工程

还是在终端进行，执行以下代码。

npm init vite-app vue3_test_vite
cd vue3_test_vite
npm install
npm run dev

2.安装vue3开发者工具

3.vue3的函数

3.1.setup

1. 理解：Vue3.0中一个新的配置项，值为一个函数。
2. setup是所有Composition API（组合API）“ 表演的舞台 ”。
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对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

3.1.1.emit、slot、attr

插槽语法，vue3的写法

3.2.ref函数

基本类型使用getter、setter实现响应式，对象类型使用ES6的Proxy实现响应式。使用或修改时需要加.value。在标签中引用不用加.value，vue会自动加。

3.3.reactive函数

检测是深层次的，可以套多层对象。

使用时不用加.value.

可以处理数组

3.3.1.ref和reactive对比

3.4.vue3的响应式原理

reactive 的响应式很灵敏，修改任何数据都能监测到。
模拟vue3的响应式实现，其中的参数 target 就是传入的参数 person 。
使用了 Proxy 代理对象，和 Reflect 反射对象。

3.5.一些api的改变

3.6.其他改变

4.计算属性

5.watch数据监测

5.1.监视reactive

强制开启深度监视，deep 【】配置无效。

5.2.监视ref

5.3.watchEffect

watchEffect函数中用到什么数据就监视什么数据。

6.生命周期钩子

vue3的生命周期

vue3中生命周期钩子的写法
先要 import 引入

7.hook代码复用

新建src/hook/usePoint.js在里面写代码。

在组件中引入

8.toRef

9.shallowRef和shallowReactive

用法和ref、reactive相同
shallowRef如果传入基本类型数据则是响应式的，传入对象则不是响应式的。
shallowReactive是浅层响应式的，只能监测第一层。

10.readonly和shallowReadonly

readonly深层次只读，shallowReadonly浅层次只读，第一层只读，后面层次可写，如salary可改。

11.toRaw与markRaw

12.customRef自定义ref

13.provide和inject祖孙间传信

14.响应式数据的判断

15.新的组件

16.teleport传送

其中的 to 是css选择器，决定了传送的目标位置。

17.Suspense异步引入组件

先加载完的先显示，不会等到所有子组件都加载完再显示。

加载过程中显示加载中，加载完后显示Child组件。

使用异步引入可以在子组件使用promise。
总结