Vue3响应式高阶用法之toRaw()的使用

<script lang="ts" setup>
  import { reactive } from 'vue';

  const state = reactive({ count: 0 });
</script>

<script lang="ts" setup>
  import { toRaw } from 'vue';

  const rawState = toRaw(state);
</script>

<script lang="ts" setup>
  rawState.count = 10;
  console.log(state.count); // 输出 0，因为 state 是响应式代理，未被修改
</script>

<script lang="ts" setup>
  import { reactive, toRaw } from 'vue';

  const largeData = reactive({ items: new Array(1000).fill(0) });

  const rawData = toRaw(largeData);

  // 批量更新
  for (let i = 0; i < rawData.items.length; i++) {
    rawData.items[i] = i;
  }

  // 因为使用了原始对象，视图不会在每次更新时重新渲染
  console.log(largeData.items[0]); // 输出 0
</script>

<script lang="ts" setup>
  import { reactive, toRaw } from 'vue';
  import externalLibrary from 'external-library'; // 假设这是一个外部库

  const state = reactive({ count: 0 });

  // 获取原始对象
  const rawState = toRaw(state);

  // 将原始对象传递给外部库
  externalLibrary.process(rawState);
</script>