在 Vue 2/3 应用中，如何利用 `Object.freeze` (Vue 2) 或 `markRaw` (Vue 3) 优化大型静态数据的性能，避免不必要的响应式开销？

大家好！我是你们今天的性能优化小帮手。今天咱们聊聊 Vue 2 和 Vue 3 中，如何用 Object.freeze 和 markRaw 这两个小技巧，让咱们的静态数据不再“兴风作浪”，从而提升应用的性能。说白了，就是让那些本来就不打算改动的数据，别再占用 Vue 响应式的资源，省点力气干正事！

开场白：响应式系统的甜蜜负担

Vue 的响应式系统非常强大，能够让我们轻松地实现数据驱动视图更新。但就像吃多了甜食一样，过度使用也会带来一些负担。对于那些永远不会改变的静态数据，如果仍然让 Vue 去监听它们的变化，那就纯属浪费资源了。

举个例子，假设咱们有一个包含大量配置信息的对象，这些配置在应用运行期间是绝对不会改变的。如果直接把这个对象放到 Vue 的 data 中，Vue 就会为它的每一个属性都创建一个 getter 和 setter，并建立依赖关系。这不仅会增加内存占用，还会影响组件的渲染性能。

Vue 2 的解决方案：Object.freeze

在 Vue 2 中，我们可以使用 Object.freeze 方法来“冻结”一个对象。被冻结的对象将变得不可修改，任何尝试修改它的操作都会被忽略，而且 Vue 也不会再监听它的变化。

Object.freeze 的工作原理

Object.freeze 方法实际上做了三件事：

阻止添加新属性： 无法向对象添加新属性。
阻止删除现有属性： 无法删除对象已有的属性。
阻止修改现有属性的可配置性、可枚举性和可写性： 无法修改属性的特性。

需要注意的是，Object.freeze 只能冻结对象自身的属性，而不能冻结对象属性所引用的对象。也就是说，如果对象中包含嵌套的对象，我们需要递归地冻结它们。

Object.freeze 的使用场景

Object.freeze 最适合用于处理以下场景：

静态配置数据： 比如应用的默认设置、国际化文本等。
只读数据： 比如从后端获取的不允许修改的数据。
大型常量数据： 比如一些预定义的枚举值、颜色值等。

代码示例：使用 Object.freeze 优化配置数据

// 静态配置数据
const config = {
  appName: 'My Awesome App',
  version: '1.0.0',
  apiEndpoint: 'https://api.example.com'
};

// 冻结配置对象
Object.freeze(config);

new Vue({
  el: '#app',
  data: {
    config: config
  },
  mounted() {
    // 尝试修改配置数据，会失败
    // this.config.appName = 'New App Name'; // 在严格模式下会报错，非严格模式下修改会被忽略
    console.log(this.config.appName); // My Awesome App
  }
});

在这个例子中，我们使用 Object.freeze 冻结了 config 对象。这样，Vue 就不会再监听 config 对象的变化，从而节省了资源。

注意事项

Object.freeze 是一个浅冻结，只能冻结对象自身的属性，而不能冻结对象属性所引用的对象。
在严格模式下，尝试修改被冻结的对象会抛出错误；在非严格模式下，修改会被忽略。
Object.freeze 会影响对象的性能，因为它需要遍历对象的所有属性并修改它们的特性。但是，对于大型静态数据来说，冻结操作带来的性能提升通常大于其带来的性能损耗。

Vue 3 的解决方案：markRaw

在 Vue 3 中，引入了一个新的 API：markRaw。markRaw 的作用和 Object.freeze 类似，都是用来标记一个对象为非响应式的。但是，markRaw 比 Object.freeze 更加高效，因为它不会遍历对象的所有属性，而是直接在对象上设置一个内部标志。

markRaw 的工作原理

markRaw 方法会给对象添加一个内部标志 __v_skip，Vue 的响应式系统在处理数据时会检查这个标志，如果发现对象被标记为 markRaw，就会直接跳过对它的响应式处理。

markRaw 的使用场景

markRaw 的使用场景和 Object.freeze 类似，但是它更加适合用于处理以下场景：

大型对象： 由于 markRaw 的效率更高，因此更适合用于处理大型对象。
第三方库的对象： 有时候，我们需要在 Vue 组件中使用一些第三方库的对象。这些对象通常不需要响应式处理，因此可以使用 markRaw 将它们标记为非响应式的。
避免意外的响应式处理： 有时候，我们可能不小心将一些不需要响应式处理的数据放到了 Vue 的 data 中。使用 markRaw 可以避免这种情况。

代码示例：使用 markRaw 优化第三方库的对象

<template>
  <div>
    <p>Longitude: {{ mapCenter.lng }}</p>
    <p>Latitude: {{ mapCenter.lat }}</p>
  </div>
</template>

<script>
import { ref, onMounted, markRaw } from 'vue';
import L from 'leaflet'; // 假设你使用了 Leaflet 地图库

export default {
  setup() {
    const mapCenter = ref(null);

    onMounted(() => {
      const initialCenter = L.latLng(40.7128, -74.0060); // 纽约的经纬度
      mapCenter.value = markRaw(initialCenter); // 标记为非响应式
    });

    return {
      mapCenter,
    };
  },
};
</script>

在这个例子中，我们使用 markRaw 将 Leaflet 的 L.latLng 对象标记为非响应式的。这样，Vue 就不会再监听 mapCenter 对象的变化，从而节省了资源。虽然 mapCenter本身是个ref，但ref内部引用的对象不再是响应式的了。

markRaw 与 shallowReactive 的搭配使用

如果你的数据结构比较复杂，只有顶层属性需要响应式，而内部的属性不需要响应式，那么可以结合 shallowReactive 和 markRaw 来使用。shallowReactive 只会监听对象的顶层属性，而 markRaw 可以用来标记内部的非响应式对象。

代码示例：shallowReactive 和 markRaw 搭配使用

import { shallowReactive, markRaw } from 'vue';

const data = shallowReactive({
  name: 'John Doe',
  address: markRaw({ //address对象是非响应式的
    street: '123 Main St',
    city: 'Anytown',
  }),
});

// 修改 name 会触发响应式更新
data.name = 'Jane Doe';

// 修改 address.street 不会触发响应式更新
data.address.street = '456 Oak Ave';

console.log(data.name); // Jane Doe
console.log(data.address.street); // 456 Oak Ave

在这个例子中，data 对象使用 shallowReactive 创建，只有 name 属性是响应式的。address 对象使用 markRaw 标记为非响应式的，因此修改 address.street 不会触发响应式更新。

Object.freeze vs markRaw: 选哪个？

特性	`Object.freeze` (Vue 2)	`markRaw` (Vue 3)
工作原理	冻结对象，阻止修改	标记对象，跳过响应式处理
性能	较慢，需要遍历属性	较快，直接设置标志
适用场景	小型静态数据	大型静态数据、第三方库对象
修改对象	严格模式下报错，非严格模式下忽略	不报错，但修改无效
嵌套对象	浅冻结，需要递归冻结	浅冻结，需要递归标记
副作用	有，影响对象的可修改性	无，只影响 Vue 的响应式系统

总的来说，markRaw 在性能和灵活性方面都优于 Object.freeze，因此在 Vue 3 中应该优先使用 markRaw。但是在 Vue 2 中，Object.freeze 仍然是一个非常有用的工具。

进阶：如何递归地冻结/标记对象？

由于 Object.freeze 和 markRaw 都是浅冻结/标记，因此对于包含嵌套对象的对象，我们需要递归地冻结/标记它们。

递归冻结对象的函数 (Vue 2 适用)

function deepFreeze(obj) {
  // 如果 obj 不是对象，或者已经被冻结，则直接返回
  if (typeof obj !== 'object' || obj === null || Object.isFrozen(obj)) {
    return obj;
  }

  // 遍历对象的所有属性
  Object.keys(obj).forEach(key => {
    // 递归冻结属性值
    deepFreeze(obj[key]);
  });

  // 冻结对象自身
  return Object.freeze(obj);
}

递归标记对象的函数 (Vue 3 适用)

import { markRaw } from 'vue';

function deepMarkRaw(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (Object.hasOwn(obj, '__v_skip')) { // 如果已标记，则跳过
    return obj;
  }

  markRaw(obj);

  Object.values(obj).forEach(value => {
    deepMarkRaw(value);
  });

  return obj;
}

使用这两个函数，我们可以轻松地冻结/标记包含嵌套对象的对象。

总结：让静态数据安静如鸡

今天我们学习了如何使用 Object.freeze (Vue 2) 和 markRaw (Vue 3) 来优化大型静态数据的性能。通过将这些数据标记为非响应式的，我们可以避免不必要的响应式开销，从而提升应用的性能。记住，让静态数据安静如鸡，才能让我们的 Vue 应用飞起来！

小贴士：性能优化是一个持续的过程

性能优化是一个持续的过程，需要我们不断地学习和实践。除了使用 Object.freeze 和 markRaw 之外，还有很多其他的性能优化技巧可以用来提升 Vue 应用的性能。比如：

减少不必要的组件渲染： 使用 v-memo、computed 等技巧来避免不必要的组件渲染。
优化列表渲染： 使用 key 属性、虚拟列表等技巧来优化列表渲染。
懒加载： 使用懒加载来减少初始加载时间。
代码分割： 使用代码分割来将应用拆分成更小的块，从而提升加载速度。

希望今天的分享能够对你有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复