7.1.【shallowRef 与 shallowReactive 】

Vue 3 中，为了更好地管理响应式状态，引入了几个新的 API，包括 shallowRef 和 shallowReactive。这两个函数都是用于创建响应式的引用类型，但它们之间有一些关键的区别。

shallowRef

shallowRef 创建一个响应式的引用对象，该对象只跟踪其 .value 属性的变化。当 .value 变化时，依赖于它的任何组件将会重新渲染。但是，如果 .value 的值本身是一个对象或数组，并且该对象或数组内部发生变化，则不会触发重新渲染。

使用示例:

import { shallowRef } from 'vue';

const user = shallowRef({ name: 'Alice', age: 30 });

// 当 user.value 改变时，依赖它的组件会更新

user.value = { name: 'Bob', age: 25 };

// 但是，如果 user.value 内部属性改变，则不会触发更新

user.value.name = 'Charlie'; // 不会触发更新

shallowReactive

shallowReactive 创建一个对象的响应式代理，但它只会使该对象的第一层属性成为响应式的。这意味着如果你修改对象的第一层属性，那么变化会被追踪。然而，如果对象包含其他嵌套的对象或数组，这些内部结构的变化不会被追踪。

使用示例:

import { shallowReactive } from 'vue';

const state = shallowReactive({

user: { name: 'Alice', age: 30 },

friends: [{ name: 'Bob' }]

});

// 修改第一层属性时，会触发更新

state.user = { name: 'Charlie', age: 25 };

// 但是，如果内部属性改变，则不会触发更新

state.user.name = 'David'; // 不会触发更新

state.friends[0].name = 'Eve'; // 也不会触发更新

总结

shallowRef 用于创建一个响应式的引用，只跟踪 .value 的变化。shallowReactive 创建一个响应式代理，只使对象的第一层属性成为响应式的。

选择哪个？

如果你需要一个简单的响应式引用，可以选择 shallowRef。如果你需要一个响应式对象，但不关心对象内部深层次的响应性，可以使用 shallowReactive。

这两种方法都比完全响应式的 ref 和 reactive 要节省性能开销，因为它们减少了需要追踪的依赖数量。这对于大型应用程序或者有复杂数据结构的应用程序来说是非常有用的。

7.2.【readonly 与 shallowReadonly】

在 Vue 3 中，为了更好地管理状态并提高性能，引入了 readonly 和 shallowReadonly 这两个实用函数。它们可以用来创建不可变的响应式对象，这对于防止意外修改状态以及优化性能非常有用。

readonly

readonly 创建一个只读的响应式代理。这意味着你不能直接修改通过 readonly 创建的对象的属性。如果尝试修改这些属性，将会抛出一个错误，并且不会发生实际的修改。但是，如果对象包含其他嵌套的对象或数组，你可以修改这些内部对象或数组的属性。

使用示例:

import { reactive, readonly } from 'vue';

const state = reactive({ user: { name: 'Alice', age: 30 }, friends: [{ name: 'Bob' }] });

const readOnlyState = readonly(state);

// 不能直接修改 readOnlyState 的属性

readOnlyState.user = { name: 'Charlie', age: 25 }; // 抛出错误

// 但是，可以修改内部对象的属性

readOnlyState.user.name = 'David'; // 不会抛出错误

readOnlyState.friends[0].name = 'Eve'; // 也不会抛出错误

shallowReadonly

shallowReadonly 类似于 readonly，但它只创建一个只读的响应式代理，且只对对象的第一层属性应用只读。这意味着如果对象包含其他嵌套的对象或数组，这些内部结构仍然是可写的。

使用示例:

import { reactive, shallowReadonly } from 'vue';

const state = reactive({ user: { name: 'Alice', age: 30 }, friends: [{ name: 'Bob' }] });

const shallowReadOnlyState = shallowReadonly(state);

// 不能直接修改 shallowReadOnlyState 的属性

shallowReadOnlyState.user = { name: 'Charlie', age: 25 }; // 抛出错误

// 但是，可以修改内部对象的属性

shallowReadOnlyState.user.name = 'David'; // 不会抛出错误

shallowReadOnlyState.friends[0].name = 'Eve'; // 也不会抛出错误

总结

readonly 创建一个只读的响应式代理，阻止直接修改对象及其所有嵌套对象的属性。shallowReadonly 创建一个只读的响应式代理，只阻止直接修改对象的第一层属性，内部对象或数组仍然可写。

选择哪个？

如果你需要一个完全不可变的响应式对象，可以选择 readonly。如果你需要一个只读的响应式对象，但不关心内部对象的响应性和可写性，可以使用 shallowReadonly。

这两种方法都可以帮助你在开发过程中避免意外的状态修改，从而提高代码的健壮性和可维护性。此外，它们还可以带来性能上的好处，因为只读对象不需要追踪内部属性的变化，这可以减少不必要的渲染和计算。

7.3.【toRaw 与 markRaw】

在 Vue 3 中，为了更好地管理和操作响应式数据，引入了 toRaw 和 markRaw 这两个实用函数。它们可以帮助您处理和优化与响应式数据相关的操作。

toRaw

toRaw 函数用于获取一个响应式对象的原始版本。这意味着它会返回对象的一个非响应式版本，这在某些场景下很有用，比如当你需要将响应式对象作为参数传递给不支持响应式数据的函数或库时。

使用示例:

import { reactive, toRaw } from 'vue';

const state = reactive({ name: 'Alice', age: 30 });

// 获取 state 的原始版本

const rawState = toRaw(state);

// 修改原始版本的属性不会触发响应

rawState.name = 'Bob'; // 修改 rawState.name 不会影响 state

// 但是，state 仍然是响应式的

state.name = 'Charlie'; // 修改 state.name 会导致依赖 state 的组件重新渲染

markRaw

markRaw 函数用于标记一个对象，使其永远都不会被转换成响应式的。这对于那些大型的对象或者外部库返回的对象非常有用，因为这些对象可能包含复杂的内部结构，转换为响应式可能会消耗大量的性能资源。

使用示例:

import { reactive, markRaw } from 'vue';

const largeObject = {

// ...一个非常大的对象

};

// 标记 largeObject 为非响应式的

const markedLargeObject = markRaw(largeObject);

const state = reactive({

largeData: markedLargeObject

});

// 即使 state.largeData 是响应式的对象的一部分，它本身也不会变为响应式的

state.largeData.someProperty = 'new value'; // 不会触发任何响应式更新

总结

toRaw 用于获取响应式对象的原始版本，即一个非响应式的副本。markRaw 用于标记一个对象，使其永远不会被转换成响应式的。

选择哪个？

如果你需要暂时性地禁用一个响应式对象的响应性，可以选择 toRaw。如果你需要永久性地禁用一个对象的响应性，可以使用 markRaw。

这两种方法都可以帮助您更好地控制和优化应用程序中的响应式数据管理。使用 toRaw 可以在需要时临时禁用响应性，而使用 markRaw 可以避免不必要的性能开销。

7.4.【customRef】

customRef 是 Vue 3 中的一个实用工具，它允许您创建自定义的响应式引用类型。通过 customRef，您可以实现更复杂的逻辑，比如自定义值的读取和写入行为、延迟更新、缓存值等。

使用 customRef 的基本步骤：

定义一个类：继承自 VueReactivity/refImpl/RefBase 并实现 track 和 trigger 方法。实现 track 方法：当值被读取时调用，用于追踪依赖。实现 trigger 方法：当值被修改时调用，用于触发依赖的更新。定义 get 和 set 方法：实现自定义的读取和写入逻辑。

作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行逻辑控制。

实现防抖效果（useSumRef.ts）：

import {customRef } from "vue";

export default function(initValue:string,delay:number){

let msg = customRef((track,trigger)=>{

let timer:number

return {

get(){

track() // 告诉Vue数据msg很重要，要对msg持续关注，一旦变化就更新

return initValue

},

set(value){

clearTimeout(timer)

timer = setTimeout(() => {

initValue = value

trigger() //通知Vue数据msg变化了

}, delay);

}

}

})

return {msg}

}

总结

customRef 允许您创建自定义的响应式引用类型，实现更复杂的逻辑。定义类：继承自 RefBase 并实现 track 和 trigger 方法。实现逻辑：通过 get 和 set 方法自定义读取和写入行为。使用 customRef：通过 customRef 函数创建自定义引用。

通过 customRef，您可以实现许多有趣的功能，比如缓存值、防抖更新、懒加载等。这对于构建高性能和复杂的应用程序非常有用。

8. Vue3新组件

8.1. 【Teleport】

Teleport 是 Vue 3 中引入的一个非常有用的全局 API，它允许您将组件渲染到 DOM 中的任意位置，而不受组件树的限制。这在实现模态框、弹出菜单、工具提示等 UI 元素时非常有用，因为这些元素通常需要放置在页面的特定位置，而不仅仅是当前组件的子节点。

Teleport 的基本用法

HTML 结构

首先，在 HTML 中定义一个接收 Teleport 渲染内容的容器，通常位于 body 或者 html 标签内：

<div id="teleport-target"></div>code>

Vue 组件中使用 Teleport