记录一些Vue3笔记

Vue3

Vue3 生命周期

与 2.x 版本生命周期相对应的组合式 API
    beforeCreate -> 使用 setup()
    created -> 使用 setup()
    beforeMount -> onBeforeMount
    mounted -> onMounted
    beforeUpdate -> onBeforeUpdate
    updated -> onUpdated
    beforeDestroy -> onBeforeUnmount
    destroyed -> onUnmounted
    errorCaptured -> onErrorCaptured
新增的钩子函数
组合式 API 还提供了以下调试钩子函数：
onRenderTracked
onRenderTriggered

Composition API（常用部分）

setup

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

setup细节

/* setup执行的时机 */
    在beforeCreate之前执行(一次), 此时组件对象还没有创建
    this是undefined, 不能通过this来访问data/computed/methods / props
    其实所有的composition API相关回调函数中也都不可以
/* setup的返回值 */
    一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
    返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
    返回对象中的方法会与methods中的方法合并成功组件对象的方法
    如果有重名, setup优先
    注意:
    一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods
    setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据
/* setup的参数 */
    setup(props, context) / setup(props, {attrs, slots, emit})
    props: 包含props配置声明且传入了的所有属性的对象
    attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
    slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
    emit: 用来分发自定义事件的函数, 相当于 this.$emit

ref

作用：定义一个数据的响应式
语法：const xxx = ref(initValue);
	创建一个包含响应式数据的引用对象
	js中操作数据：xxx.value
	模板中操作数据：不需要value
一般用来定义一个基本类型的响应式数据

ref获取元素

利用ref函数获取组件中的标签元素
<template>
  <input type="text" ref="inputRef">
</template>

<script lang="ts">
import { onMounted, ref } from 'vue'
/* ref获取元素: 利用ref函数获取组件中的标签元素 */
export default {
  setup() {
    const inputRef = ref<HTMLElement|null>(null)

    onMounted(() => {
      inputRef.value && inputRef.value.focus()
    })

    return {
      inputRef
    }
  },
}
</script>

reactive

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

reactive与ref-细节

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

vue2与vue3的响应式

/* Vue2的响应式 */
核心:
    对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
    数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
问题
    对象直接新添加的属性或删除已有属性, 界面不会自动更新
	直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}
	
/* Vue3的响应式 */
核心:
    通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等...
    通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

计算属性与监视

/* computed函数: */
    与computed配置功能一致
    只有getter
    有getter和setter
/* watch函数 */
    与watch配置功能一致
    监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
    默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
    通过配置deep为true, 来指定深度监视
/* watchEffect函数 */
    不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
    默认初始时就会执行第一次, 从而可以收集需要监视的数据
    监视数据发生变化时回调

自定义hook函数

1.使用Vue3的组合API封装的可复用的功能函数
2.自定义hook的作用类似于vue2中的mixin技术
3.自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂
4.利用TS泛型强化类型检查

toRefs

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref
应用: 当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用
问题: reactive 对象取出的所有属性值都是非响应式的
解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性

Composition API（其他部分）

shallowReactive 与 shallowRef

shallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式)
shallowRef: 只处理了value的响应式, 不进行对象的reactive处理
什么时候用浅响应式呢?
    一般情况下使用ref和reactive即可
    如果有一个对象数据, 结构比较深, 但变化时只是外层属性变化 ===> shallowReactive
    如果有一个对象数据, 后面会产生新的对象来替换 ===> shallowRef

readonly 与 shallowReadonly

readonly:
    深度只读数据
    获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。
    只读代理是深层的：访问的任何嵌套 property 也是只读的。
shallowReadonly
    浅只读数据
    创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换
应用场景:
    在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除

toRaw 与 markRaw

toRaw
    返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。
    这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发界面更新。
markRaw
    标记一个对象，使其永远不会转换为代理。返回对象本身
应用场景:
    有些值不应被设置为响应式的，例如复杂的第三方类实例或 Vue 组件对象。
    当渲染具有不可变数据源的大列表时，跳过代理转换可以提高性能。

toRef

为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的
区别ref: 拷贝了一份新的数据值单独操作, 更新时相互不影响
应用: 当要将 某个prop 的 ref 传递给复合函数时，toRef 很有用

customRef

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制

provide 与 inject

provide和inject提供依赖注入，功能类似 2.x 的provide/inject
实现跨层级组件(祖孙)间通信

响应式数据的判断

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

新组件

Fragment(片断)

在Vue2中: 组件必须有一个根标签
在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
好处: 减少标签层级, 减小内存占用

Teleport(瞬移)

Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示

Suspense(不确定的)

它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验
<template>