vue3 markraw

作者：苏染瞳° 发布日期:2025-12-06 浏览:71

import { markRaw } from 'vue';

// 示例代码：使用 markRaw 防止对象被 Vue 的响应式系统劫持
export default {
  data() {
    return {
      // 使用 markRaw 包裹的对象不会被 Vue 转换为响应式对象
      nonReactiveObject: markRaw({
        name: 'Vue 3',
        version: '3.0.0'
      })
    };
  },
  methods: {
    updateObject() {
      // 修改 nonReactiveObject 的属性不会触发视图更新，因为它不是响应式的
      this.nonReactiveObject.version = '3.1.0';
      console.log(this.nonReactiveObject);
    }
  }
};

解释说明：

markRaw 是 Vue 3 中的一个函数，用于标记一个对象，使其永远不会被转换为响应式对象。
在上面的示例中，nonReactiveObject 被 markRaw 包裹，因此它不会被 Vue 的响应式系统劫持。这意味着对 nonReactiveObject 的任何修改都不会触发视图更新。
这在某些场景下非常有用，例如当你有一个大型的第三方库或数据结构，不需要响应式时，可以使用 markRaw 来优化性能。

上一篇：vue3 router push

下一篇：antd of vue