[JavaScript知识库]关于的vue小笔记

### setup?
? ??
? ? vue3.0 中的一个配置项，值是函数

? ? setup是组合Composition API中的入口函数，也是第一个要使用的函数。

? ? setup只在初始化时执行一次，所有的Composition API函数都在此使用。

? ? 组件中使用的的数据、方法等，都需要配置在setup中?

? ? setup需要返回值 ：?
? ? ? ? 1.返回值为对象：返回值的中的属性、方法均可以在模板中使用?
? ? ? ? 2.返回值是函数（不常用）,需要借助h函数

### ref
? ? 作用：定义一个响应式数据?
? ? 用法： ref(数据值) ?比如 let name=ref('张三')
? ? ? ? ? ?返回一个包含响应式数据的引用对象 RefImpl ?
? ? ? ? ? ? 在模板中直接使用 name,不需要value
? ? ? ? ? ? 而在js操作中 name.value?
? ? 接收的数据：可以是基本数据类型，也可以是对象
? ? 基本数据类型: 响应式依然是依靠definedProperty的get和set实现的 ? ? ?
? ??
? ? 引用数据类型： 内部是依靠proxy

? ? 注意： 在Vue2中我们通过this.$refs来获取dom节点，?
? ? ? ? ? ?Vue3中我们通过ref来获取节点
? ? ? ? ? 首先需要在标签上添加ref='xxx'，然后再setup中定义一个初始值为null的ref类型,名字要和标签的ref属性一致

### reactive
? ? 作用： 定义一个对象类型的响应式数据?
? ? 用法 ? reactive(对象数据) ?接收对象或者是数组 ?返回值一个proxy对象（代理对象）?
? ? reactive 定义的响应式数据是深层次的
? ? 内部基于es6的proxy实现，通过代理对象操作源对象内部数据都是响应式的 ??

### Vue2.X的响应式原理
? ? 实现原理：
? ? ? ? 对象类型：通过definedProperty()对属性的读取、修改进行拦截（数据拦截）
? ? ? ? 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）
? ? 用法：
? ? ? ? Object.definedProperty(data,'属性',{
? ? ? ? ? ? get(){},
? ? ? ? ? ? set(){}
? ? ? ? })
? ? 缺点：
? ? ? ? 新增属性、删除属性，界面不会更新
? ? ? ? 直接通过下标修改数组、界面不会更新

### Vue3.0的响应式原理
? ? 实现原理
? ? ? ? 通过Proxy（代理）：拦截对象中任意属性的变化，包括属性值的读写、属性的添加、属性的删除等
? ? ? ? 通过Reflect（反射）: 对被代理的属性进行操作
? ? 用法：
? ? ? ? new Proxy(data,{
? ? ? ? ? ? // 拦截读取属性值
? ? ? ? ? ? get(target,prop){
? ? ? ? ? ? ? ? return Reflect.get(target,prop)
? ? ? ? ? ? },
? ? ? ? ? ? // 拦截设置属性值或添加新属性
? ? ? ? ? ? set(target,prop,value){
? ? ? ? ? ? ? ? return Reflect.set(target,prop,value)
? ? ? ? ? ? },
? ? ? ? ? ? // 拦截删除属性
? ? ? ? ? ? deleteProperty(target,prop){
? ? ? ? ? ? ? ? return Reflect.deleteProperty(target,prop)
? ? ? ? ? ? }
? ? ? ? })

### watchEffect函数
? ? 监视属性，不用指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性 ? ??

### 生命周期函数
? ? Vue3.0可以继续使用Vue2.x中的生命周期函数，但有两个被更名
? ? ? ? beforeDestory 改为 ?beforeUnmount
? ? ? ? destoryed 改为 unmounted

? ? Vue3.0也提供了composition API形式的生命周期函数，与Vue2.x钩子对应关系如下：
? ? ? ? beforeCreate ?====> setup()
? ? ? ? created ? ? ? ====> setup()
? ? ? ? beforeMount ? ====> onBeforeMount
? ? ? ? mounted ? ? ? ====> onMounted
? ? ? ? beforeUpdate ?====> onBeforeUpdate
? ? ? ? updated ? ? ? ====> onUpdated
? ? ? ? beforeUnmount ====>onBeforeUnmount
? ? ? ? unmounted ? ? ====> onUnmounted

### 自定义hook函数

? ? 什么是hook函数
? ? ? ? 本质是一个函数，把setup中使用的composition API进行了封装
? ? 类似于vue2.x中的mixins
? ? 优势：复用代码，让setup中的逻辑更加清楚易懂

### toRefs
? ? 1) 作用
? ? ? ? 把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个 ref

? ? 2) 应用
? ? ? ? 我们使用reactive创建的对象，如果想在模板中使用，就必须得使用xxx.xxx的形式,如果大量用到的话还是很麻烦的,但是使用es6解构以后,会失去响应式,那么toRefs的作用就体现在这,，利用toRefs可以将一个响应式 reactive 对象的所有原始属性转换为响应式的ref属性。当然小伙伴们可以自行开发更多应用场景。

### 其他的composition API
? ? 1. shallowReactive shallowRef
? ? ? ? shallowReactive 只处理对象最外层属性的响应式（浅响应式）
? ? ? ? shallowRef ?只处理基本数据类型 不处理对象的响应式

? ? 2. readonly shallowReadonly
? ? ? ? readonly 让一个响应式数据变成只读（深只读）
? ? ? ? shallowReadonly ? 让一个响应式数据变成只读（浅只读）

? ? 3. toRaw ?markRaw
? ? 4. customRef
? ? 5. provide inject

? ??

?