Vue3 中 markRaw 示例的详细解析

在 Vue3 中，markRaw 是一个相对不太常见但在特定场景下非常有用的工具函数。它主要用于标记一个对象为“原始”的，防止 Vue 对其进行响应式处理。

让我们通过一个简单的示例来深入理解 markRaw 的作用。假设我们有一个包含一些复杂数据结构的对象，比如一个包含大量嵌套对象和数组的配置对象。

import { markRaw } from 'vue';

const complexConfig = {
  settings: {
    theme: 'dark',
    fontSize: 16
  },
  options: [
    { enabled: true, name: 'Option 1' },
    { enabled: false, name: 'Option 2' }
  ]
};

const markedConfig = markRaw(complexConfig);

在上述示例中，我们使用 markRaw 对 complexConfig 进行了标记。这样做的原因可能是因为这个配置对象在整个应用的生命周期内不会发生变化，或者我们明确不希望 Vue 对其进行响应式追踪，以减少不必要的性能开销。

如果没有使用 markRaw ，Vue 会尝试将这个对象及其内部的嵌套属性都转换为响应式的，这在某些情况下可能会导致性能问题，特别是当对象结构非常复杂且不常修改时。

另外，需要注意的是，被 markRaw 标记的对象将不会触发依赖更新，也不会被 Vue 的 reactivity 系统进行深度克隆。这意味着，如果在后续的代码中对这个对象进行了修改，Vue 不会自动检测到这些修改并更新相关的视图。

例如，如果我们在之后的代码中更改了 markedConfig.settings.theme 的值，视图不会自动更新以反映这个变化。

markRaw 为我们提供了一种精细控制响应式数据的方式，让我们能够在性能和功能之间找到最佳的平衡点。在实际开发中，要根据具体的业务需求和性能要求，合理地运用 markRaw 来优化应用的性能和行为。