揭秘Vue中的toRaw和markRaw：响应式与原生对象的艺术

2023-10-06 10:49:36

操控响应式对象：从 toRaw 到 markRaw

在 Vue 的响应式系统中，响应式对象通过 Proxy 代理对象实现，从而能够自动侦测属性变化并触发 Vue 更新。然而，有时我们需要直接访问响应式对象的原始值，或者防止普通对象被 Vue 响应式系统侦测。这就引入了两个实用的 API：toRaw() 和 markRaw().

从响应式到原生：toRaw()

toRaw() 方法将一个响应式 Proxy 代理对象转换为普通对象。转换后的普通对象与响应式对象具有相同的值，但失去了响应式特性。这意味着对普通对象进行修改不会触发 Vue 的更新。

使用场景：

将响应式对象传递给非 Vue 组件
对响应式对象进行深拷贝
访问响应式对象的原始值

示例代码：

const app = Vue.createApp({
  data() {
    return {
      name: 'John Doe',
      age: 30
    };
  }
});

const rawData = app.config.globalProperties.toRaw(app.data);

console.log(rawData); // { name: 'John Doe', age: 30 }

rawData.name = 'Jane Doe';

console.log(app.data.name); // 'John Doe' (响应式对象未更新)

标记为不可代理：markRaw()

markRaw() 方法与 toRaw() 相反，它将一个普通对象标记为不可 Proxy 代理的对象。这表示 Vue 不会对标记为不可代理的对象进行响应式处理。

使用场景：

在 Vue 组件中使用普通对象
防止某个对象被 Vue 响应式系统侦测
将普通对象传递给非 Vue 组件

示例代码：

const app = Vue.createApp({
  data() {
    return {
      user: markRaw({
        name: 'John Doe',
        age: 30
      })
    };
  }
});

app.user.name = 'Jane Doe';

console.log(app.user.name); // 'Jane Doe' (未触发 Vue 更新)