vue3中响应式

vue3生命周期

• setup (beforeCreate created)
• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted

ref 获取Dom元素 获取组件 操作在onMounted生命周期里

toRefs:可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性

hook函数：类似于混入 mixin
-将相同功能的代码进行封装。

跳转传参

• 声明式router-link to
• 函数式
  • useRouter() 跳转
  • useRoute() 接收参数

readonly 与 shallowReadon

• readonly 只读
• shallowReadonly 浅只读 深层的数据不是只读的

shallowReactive 与 shallowRef

• shallowReactive 和 shallowRef 都是用于创建响应式对象的函数，但它们分别适用于不同的场景。
  • shallowReactive：
    ● shallowReactive 用于创建一个浅响应式对象，它只会对根属性进行响应式处理，而不会递归到对象的嵌套属性。
    ● 当对浅响应式对象进行操作时，只有根属性的变化会触发视图更新，而嵌套属性的变化不会触发。
  • shallowRef：
    ● shallowRef 用于创建一个包含基本值或对象引用的 ref 对象，它也是浅的，只会监听到根属性的变化，并将变化通知给视图。
    ● 当使用 shallowRef 包装一个对象时，对该对象内部属性的修改不会被监听，只有重新赋值整个对象的操作才会引起响应式更新。

toRaw和markRaw

• 在 Vue 3 中，toRaw 和 markRaw 是用于处理响应式对象的两个函数，它们都与 Vue 3 的响应式系统有关。
  toRaw：
  ● toRaw 函数用于获取代理对象的原始未代理版本。在开发过程中，有时候我们需要直接访问原始的未代理版本对象，就可以使用 toRaw 函数来实现。
  ● 通过 toRaw 函数，我们可以获取代理对象的真实原始值，而不是代理值。
• markRaw：
  ● markRaw 函数用于标记一个对象，使其永远不会被转换为响应式对象。
  ● 当我们有某些特殊的对象，不希望其成为响应式对象时，可以使用 markRaw 将其标记为非响应式。

toRef和toRefs

toRef 与 toRefs在 Vue 3 中，toRef 和 toRefs 都是用于创建 ref 对象的函数，但它们的使用场景和返回值略有不同。

• toRef：
  ● toRef 函数用于创建一个指定响应式对象的属性的可响应式引用 (ref)。
  ● toRef 接收两个参数，一个是响应式对象，另一个是响应式对象上的属性名。
  ● toRef 返回一个 ref 对象，可以通过该 ref 对象访问原始响应式对象的属性，修改 ref 对象的值会影响到原始对象。
• toRefs：
  ● toRefs 函数用于将一个响应式对象转换为一个包含多个属性的 ref 对象集合。
  ● toRefs 接收一个响应式对象作为参数。
  ● toRefs 返回一个对象，该对象中的每个属性都是 ref 对象，通过该 ref 对象可以访问原始响应式对象的对应属性。修改 ref 对象的值会影响到原始对象。

provide和inject 组件传参

响应式数据判断

• isRef
  • 可以使用 isRef 方法来判断一个值是否是 ref 对象，即是否是响应式的。如果一个值是 ref 对象，则 isRef 方法会返回 true。
• isReactive
  • 在 Vue 3 中，可以使用 isReactive 方法来判断一个对象是否是响应式的。如果一个对象是响应式对象，则 isReactive 方法会返回 true。
• isReadonly
  • 在 Vue 3 中，可以使用 isReadonly 方法来判断一个对象是否是只读的。如果一个对象是只读的，则 isReadonly 方法会返回 true。