Vue3快速入门-toRaw 与 markRaw_ts markraw

查看本系列文章合集click me

下载本系列文章源码click me

toRaw: 将一个响应式对象转为普通对象

markRaw: 标记一个对象，让它永远不会转为响应式对象，返回值是这个对象本身

• 应用场景
  • 有些值不应被设置为响应式的，例如复杂的第三方类实例或 Vue 组件对象。
  • 当渲染具有不可变数据源的大列表时，跳过代理转换可以提高性能。

<template>
  <div id="app"></div>
</template>

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

export default defineComponent({
  setup() {
    /* toRaw */
    const userInfo = reactive({
      name: "温情key",
      age: 23,
    });

    const toRawInfo = toRaw(userInfo);

    console.log(userInfo);
    console.log(toRawInfo);

    /* markRaw */
    const obj = {
        name: '温情key'
    };

    // 标记不能转换为响应式
    let markObj = markRaw(obj);
    // 尝试转换为响应式
    let reactiveObj = reactive(markObj);

    console.log(reactiveObj);

    return {
      userInfo,
      toRawInfo,
      reactiveObj
    };
  },
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

可以看到第二个log toRawInfo 已经转换为了普通对象，也就是说，它就已经具有响应性了。

第三个log reactiveObj 使用 reactive 依旧没把他转换为响应式对象，因为它已经被标记为不可响应对象。