当前位置:首页> 正文
Vue3.0API介绍中 markRaw 使用示例
Vue3.0API介绍中 markRaw 使用示例
markRaw
标记一个对象,使其永远不会转换为 proxy。返回对象本身。
<script setup>
import { markRaw, reactive, isReactive } from "vue";
const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false
// 嵌套在其他响应式对象中时也可以使用
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false
</script>
重要
markRaw 和下方的 shallowXXX API 使你可以有选择地退出默认的深度响应式/只读转换模式,并将原始的,未被代理的对象嵌入状态图中。它们可以根据情况灵活运用:
有些值不应该是响应式的,例如复杂的第三方类实例或 Vue 组件对象。
当渲染具有不可变数据源的大列表时,跳过 proxy 转换可以提高性能。
这些例子是进阶的运用,因为原始选择退出仅在根级别,因此,如果将嵌套在内的、未标记的原始对象添加进响应式对象,然后再次访问该响应式对象,就会得到原始对象被代理后的版本。这可能会导致同一性风险——即执行一个依赖于对象本身的操作,但同时使用同一对象的原始版本和被代理后的版本:
<script setup>
import { markRaw, reactive, isReactive } from "vue";
const foo = markRaw({
nested: {}
})
const bar = reactive({
// 虽然 `foo` 被标记为原始,但 foo.nested 不是。
nested: foo.nested
})
console.log(foo.nested === bar.nested) // false
</script>
同一性风险通常很少见。然而,为了正确地使用这些 API,同时安全地避免同一性风险,就需要对响应性系统的工作原理有一个充分的理解。
|
展开全文阅读
相关内容
-
在wps中粘贴保留原格式化|wps中复制文件保留原
在wps中粘贴保留原格式化|wps中复制文件保留原有格式,格式化,...
-
中联吊车电脑显示器图解|中联吊车电脑说明书
中联吊车电脑显示器图解|中联吊车电脑说明书,,1. 中联吊车电脑...
-
金蝶k3财务软件中有成本么|金蝶K3软件中如何跑
金蝶k3财务软件中有成本么|金蝶K3软件中如何跑成本,,1.金蝶K3...
-
无法读取U盘中的数据
无法读取U盘中的数据,,核心提示:我有一个512MB的U盘,把它插在电...
-
如何在安装过程中部署DevExpress控件
如何在安装过程中部署DevExpress控件,控件,文件,本文目录如何...
-
苹果电脑如何连接和使用扫描仪
苹果电脑如何连接和使用扫描仪,,扫描仪的使用 用苹果扫描图像...
-
wps数据拟合图形公式|你好,请问在WPS中拟合线性
wps数据拟合图形公式|你好,请问在WPS中拟合线性方程,请问在WP...
-
wps中的快捷键是什么|wps中的快捷键是什么意思
wps中的快捷键是什么|wps中的快捷键是什么意思,,wps中的快捷键...
-
金蝶k3入如何设置公式|金蝶K3中计量单位该如何
金蝶k3入如何设置公式|金蝶K3中计量单位该如何设置呢?,,1.金蝶...
-
wps删除重复数据|WPS表格中,删除重复项,只保留
wps删除重复数据|WPS表格中,删除重复项,只保留一个数据,如何...
-
如何使用selenium+TestNG做web数据驱动测试
如何使用selenium+TestNG做web数据驱动测试,数据库,数据,本文...
-
iPad的手势功能iPad4手势的使用教程
iPad的手势功能iPad4手势的使用教程,,可能有很多朋友刚刚接触...
-
索尼哪些耳机能连电脑|索尼哪些耳机能连电脑使
索尼哪些耳机能连电脑|索尼哪些耳机能连电脑使用,,1. 索尼哪些...
-
金蝶kis专业版技巧|如何使用金蝶KIS专业版
金蝶kis专业版技巧|如何使用金蝶KIS专业版,,1.如何使用金蝶KIS...
-
绝地求生标记快捷键|绝地求生鼠标中键快速标记
绝地求生标记快捷键|绝地求生鼠标中键快速标记,,绝地求生鼠标...