Vue3响应式高阶用法之markRaw()

Vue3响应式高阶用法之markRaw()

文章目录

一、简介

在Vue3中，响应式系统是其核心特性之一，它允许我们轻松地管理和更新应用程序的状态。然而，有时我们需要排除某些对象，使其不被响应式系统追踪。

markRaw()

就是为此目的而设计的。本文将详细介绍

markRaw()

的作用、使用场景及最佳实践。

二、使用场景

2.1 避免性能开销

在某些情况下，我们可能不希望某个对象被Vue的响应式系统追踪，以避免不必要的性能开销。例如，大型的第三方库对象或不需要响应式的静态数据。

2.2 防止意外修改

有些对象在应用程序的生命周期中不应该被修改。通过

markRaw()

可以确保这些对象不会被意外地转换为响应式，从而避免不必要的状态变更。

三、基本使用

3.1 标记对象

markRaw()

的主要作用是标记一个对象，使其不再被

reactive

或

shallowReactive

转换为响应式代理。

<script lang="ts" setup>import{ markRaw, reactive }from'vue';const someObject ={ name:'天天鸭'};const markedObject =markRaw(someObject);// 即使使用 reactive，markedObject 也不会变成响应式const state =reactive({ obj: markedObject });</script>

在上面的例子中，

markedObject

即使被包裹在

reactive

中，也不会变成响应式对象。

四、功能详解

4.1 markRaw与reactive的区别

reactive

会将整个对象转换为响应式代理，而

markRaw

则会阻止这种转换。

4.2 markRaw与ref的区别

ref

主要用于创建一个响应式引用，它可以封装任何类型的值如字符串、数字和对象。当你将一个对象放入

ref

时，

ref

本身依然是响应式的，而

markRaw

的作用是阻止对象被转换为响应式，这和

ref

的设计不匹配。

<script lang="ts" setup>import{ ref, markRaw }from'vue';const someObject ={ name:'天天鸭'};const rawObject =markRaw(someObject);const stateRef =ref(rawObject);// ref 本身是响应式的，但 rawObject 不会被转换为响应式
  stateRef.value.name ='天天鹅';// 这不会触发响应式更新</script>

五、最佳实践及案例

5.1 使用大型第三方库对象

在使用大型第三方库（如图表库、地图库）时，可以使用

markRaw()

避免这些对象被Vue的响应式系统追踪，从而提高性能。

<script lang="ts" setup>import{ markRaw }from'vue';import*as echarts from'echarts';const chartInstance =markRaw(echarts.init(document.getElementById('chart')));</script>

5.2 静态配置数据

对于一些静态配置数据，可以使用

markRaw()

确保它们不会被意外修改。

<script lang="ts" setup>import{ markRaw }from'vue';const config =markRaw({
    apiEndpoint:'https://api.example.com',
    timeout:5000});</script>

六、总结

markRaw()

是Vue3中一个非常有用的工具，特别是在需要控制对象的响应式行为时。通过合理地使用

markRaw()

，我们可以避免不必要的性能开销和防止意外的状态变更，从而更好地管理应用程序的状态。

希望本文能帮助你更好地理解和使用

markRaw()

，提升你的Vue3开发体验。如果你有任何问题或建议，欢迎在评论区留言讨论。