vue3的一点笔记

1、项目结构的变化

vue3的main文件和vue2的main文件有所不同

vue2的main.js

vue3的main.js

---vue3相对于vue2不再是一个构造函数，引入的是一个createApp的一个工厂函数

---vue3不再使用$mount挂载而是使用mount挂载

---vue3创建的实例对象App类似于vm实例对象，但是比vm实例对象更轻量

---vue3结构中模板结构可以没有div，在vue3中会将多个标签包含在一个名为Fragment的虚拟元素中，这样子可以减少标签层次，减少内存的占用

2、vue3中的Setup

在vue3中不需要再写data、methods、computed这些配置对象，而是把组件中所用到的数据方法都写到setup（）函数中， 他是组件内使用 Composition API的入口。必须要有返回值，这样子对象的属性方法可以在模板中直接使用

注：setup中我们一般不使用this，在setup中this是undefined

3、vue3中的Ref函数

ref是将一个数据变成响应式数据，但是修改ref必须用.value来修改

4、vue3中的Reactive

定义一个对象类型的响应式数据，和ref的功能相似，但是reactive主要是处理对象的响应式对象，使用reactive可以处理对象式响应式可以深层监视对象中属性的改变

5、vue3中的ToRef（a，b）

toref将一个东西变成响应式对象，参数a要操作的对象，参数b要操作对象的属性

6、vue3中的ToRefs

和toref的不同就是，torefs可以将一个对象所有属性直接变成一个响应式，而toref只能一个一个的将对象中的某个属性变成响应式

7、Readonly

让一个响应式数据变成只读的

8、ShallowReadonly

让一个数据变成只读的但是只用第一层数据是只读的，更深层次的数据还是能被修改

9、ShallowRef

只处理基本数据类型的响应式, 不进行对象的响应式处理。

10、ShallowReactive

只处理对象最外层属性的响应式（浅响应式）。

11、ToRow

将响应式数据变成原始数据

12、markRow

标记一个对象，让其永远不会再成为一个响应式对象

13、provide和inject实现组件间的通信

provide（'传递数据的名字'，'传递的数据'），写在祖先元素中，提供数据

inject（'接收的数据'）

在祖先组件中引入provide组合式API，用provide提供数据

在孙组件中用inject接收，就可以直接在孙组件中使用祖先组件的数据了 

 

14、响应式数据的判断

----isref：检查一个值是否为ref对象

---isReactive：检查一个对象是否为Reactive创建的响应式代理

---isReadonly：检查一个对象是否为Readonly创建的只读代理

---isProxy：检查一个对象是否为Reactive或者Readonly方法创建的代理