Vue响应式数据

前言

在 Vue中，响应式数据是构建动态、交互性强的应用程序的核心。而ref、shallowRef和markRaw作为 Vue 提供的几个重要 API，在处理响应式数据时扮演着关键角色。

一、ref

ref() 是 Vue 3 中用于创建响应式数据的一个函数，它接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

<template>​
  <div>​
    <p>Counter: {{ count }}</p>​
    <button @click="increment">Increment</button>​
  </div>​
</template>​
​
<script setup>​
import { ref } from 'vue';​
​
const count = ref(0);​
​
const increment = () => {​
  count.value++;​
};​
</script>

在上述代码中，ref(0)创建了一个名为count的响应式引用，初始值为0。在模板中通过{{ count }}来访问这个响应式数据，当点击按钮触发increment函数时，count.value++修改了count的值，Vue 会自动检测到变化并更新视图。

二、shallowRef

shallowRef() 是ref ()的浅层作用形式，常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。它和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。

const state = shallowRef({
	name:'lili',
	age:20
})

//不会触发更改
state.value.age = 21

//会触发更改
state.value = {name:'lili',age:21}

shallowRef适用于性能优化场景，当你明确知道某个数据内部属性的变化不需要触发视图更新，或者数据结构非常复杂，不需要深度响应式时，可以使用shallowRef来减少不必要的响应式追踪。

三、markRaw

markRaw的作用是标记一个对象，使其不被 Vue 转换成响应式对象。当你有一个已经存在的对象，且不希望 Vue 对其进行递归的响应式处理时，就可以使用markRaw。

import { reactive, markRaw } from 'vue';

const object1 = {
  data: 'This is existing data'
};

const wrapper = reactive({
  obj: markRaw(object1)
});

// 修改obj不会触发视图更新
wrapper.obj.data = 'Updated data';

在上述代码中，object1 通过markRaw标记后，即使将其作为reactive对象wrapper的属性，对object1 属性的修改也不会触发响应式更新。这在一些特殊场景下很有用，比如引入外部库创建的对象，不希望 Vue 对其进行额外的响应式处理。

总结

综上所述，在 Cesium 与 Vue 的结合开发中，选择使用shallowRef来处理viewer实例是基于多方面因素的审慎考量。从响应式原理层面来看，ref创建深度响应式数据，会对复杂viewer实例内部大量属性进行递归追踪，这在 Cesium 场景中既不必要又消耗性能；markRaw则完全跳过响应式转换，不适用于viewer实例需要在 Vue 中存在一定响应交互的场景。而shallowRef恰到好处，它仅追踪引用变化，避免深度响应式的性能负担，契合 Cesium 自身不依赖 Vue 响应式系统的更新机制，同时防止 Cesium 内部状态变化导致的不必要视图更新。这一选择完美平衡了 Cesium 强大的三维可视化能力与 Vue 的响应式框架优势，充分体现了shallowRef在特定开发场景中的独特价值 ，也为我们在处理类似复杂第三方库实例与 Vue 响应式系统结合时提供了极具参考意义的思路。