vue3.0--知识总结

1. setup函数（是组合api的表演舞台）
2. ref函数 （基本数据类型）实现数据响应式
3. reactive函数
4. ref函数与reactive函数的区别
5. vue2.x 响应式与vue3.0 响应式
6. computed 计算属性
7. watch 监听属性
8. hook 函数
9. toRef
10. 其他组合api
11. 响应式数据判断
12. 新的组件

1.setup函数的返回值：

1. 若返回一个对象，则对象中的属性、方法、在模板中均可以直接使用（常用这种写法）
2. 若返回一个渲染函数，则可以自定义渲染内容（了解）

注意：

1. 尽量不要与vue.x配置混用；
   vue2.x配置（data、methods、computed等）中可以访问到setup中的属性和方法；
   在setup中不能访问vue2.x配置（data、methods、computed）；
   如果有重名，setup优先
2. setup不能是一个async函数，因为返回值不再是return的对象，而是Promise,模板看不到return对象中的属性。
   （后期也可以返回一个Promise实例，但是需要Suspense和异步组件的配合）

setup的两个注意点：

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

2. ref函数

1. （基本数据类型）实现数据响应式
2. 使用：
   import {ref } from “vue” //引入
   let name = ref(“小小”) //使用
   name.value=‘张小济’ //修改

3. reactive函数

1. 定义的响应式数据是深层次的 （引用数据类型）实现数据响应式 使用代理（proxy）对象操作源对象的方法封装
2. 使用：
   import {reactive} from “vue” //引入
   let object = reactive({ //使用
   type: “工程师”,
   sally: “12313”,
   });
   object.type=‘小济’ //修改

4.ref函数与reactive函数的区别

1. 从定义数据角度对比：
   ref 定义基本类型数据
   reactive定义对象（或数组）类型数据
   注意： ref也可以定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象
2. 从原理角度对比：
   ref 通过object.defineProperty()的get与set实现响应式
   reactive通过使用Proxy实现响应式，并通过Reflect操作源对象内部的数据
3. 从使用角度对比：
   ref ：操作数据需要.value,读取数据时模板中直接读取不需要.value
   reactive:操作数据与读取数据：均不需要.value

5.vue2.x 响应式与vue3.0 响应式

vue2.x实现原理：
对象类型：通过Object.defineProperty()对属性的读取，修改进行拦截（数据劫持）
数组类型：通过重写更新数组的一系列方法来实现拦截
vue2.x存在问题：
新增属性、删除属性界面不会更新 （使用$set $delete）
直接通过下标修改数组，界面不会自动更新

vue3.0 实现原理：
通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性的值的读、写、添加、删除
通过Reflect(反射)：对被代理对象的属性进行操作

不存在以上问题
get 有人读取时调用
set 有人修改和添加时调用
deleteProperty 有人删除时调用

6. computed 计算属性

import {computed } from “vue” //引入
let name = computed(()=>{
return name+’-’+name2
}) //使用

7. watch 监听属性

import {watch } from “vue” //引入
watch既指明监视的属性，也指明监视的回调
watchEffect不用指明监视的哪个属性，监视的回调函数中用到哪个属性，就监视哪个属性

8. hook 函数

定义：把setup函数中使用的组合API进行了封装 （类似于vue2.x中的mixin(混入)）
优势：复用代码，让setup中的逻辑更清晰易懂
使用：
1.创建一个hooks文件夹 创建一个userPoint.js文件，暴露一个方法
2.import 引入userPoint.js
3.用变量接收 然后return

9. toRef

import {toRef,toRefs } from “vue” //引入
作用：创建一个ref对象，其value值指向另一个对象中的某个属性
语法：const name=toRef（person,‘name’）
应用：要将响应式对象中的某个属性单独提供给外部使用时
扩展：toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)

10. 其他组合api

1. shallowReactive与shallowRef
   import {shallowReactive,shallowRef } from “vue” //引入
   shallowReactive:只处理对象最外层属性的响应式
   shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
   使用场景：
   如果有一个对象数据，结构比较深，但变化时只是外层属性变化，使用shallowReactive
   如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换 使用shallowReftive

2. readonly与shallowReadonly
   readonly：让一个响应式数据变为只读的（深读）
   shallowReadonly：让一个响应式数据变为只读的（浅读）
   应用场景：不希望数据被修改时

3. toRaw与markRaw
   toRaw:将一个由reactive生成的响应式对象转为普通对象
   使用场景：用于读取响应式对象对应的普通对象，对这个普通的对象的所有操作，不会引起页面更新。
   markRaw:标记一个对象，使其永不会再成为响应式对象
   使用场景：
   1.有些值不应该被设置为响应式的，例如复杂的第三方类库等。
   2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能
4. customRef 自定义函数
5. provide与inject
   作用：实现祖孙组件间通信
   套路：父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这些数据

11.响应式数据判断

isRef:检查一个值是否为一个ref对象
isReactive:检查一个对象是否是由reactive创建的响应式代理
isReadonly:检查一个对象是否是由readonly创建的只读代理
isPxoxy:检查一个对象是否是由reactive或者readonly方法创建的代理

12.新的组件

1.Fragment
vue2.x:组件必须有一个根标签
vue3.0:组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
减少标签层级，减小内存占用

2.Teleport
定义：一种能将我们的组件html结构移动到指定位置的技术

3.Suspense
等待异步组件时渲染一些额外的内容。