vue3 reactive删除节点

Vue 3 中的 `reactive` 是响应式数据的核心功能，它会自动跟踪数据的变化并驱动视图更新。如果你需要从一个响应式对象中删除一个节点，你可以通过普通的 JavaScript 操作结合 Vue 的一些特性来完成：

1. **手动移除属性**：直接从对象中删除对应的属性，比如 `delete object.key`。这不会触发 Vue 的响应更新，因为这不是响应式的修改。

let obj = reactive({ key: 'value' });
// 删除节点
delete obj.key;

2. **利用 ref 或者 computed**：如果你想保持对某个值的引用，并且仍然想让删除操作生效，可以使用 `ref` 或者 `computed` 来管理这个值。然后当你不再需要这个节点时，设置其为 `null` 或者 undefined，Vue会在下次检测时将其视为已清除。

const keyRef = ref('value');
// 删除节点
keyRef.value = null; // 或者 keyRef.value = undefined;

需要注意的是，由于 Vue 不支持深度监听数组的删除，所以直接删除数组元素（如 `array.splice(index, 1)`）通常不会触发视图更新，除非有其他副作用导致数据变化检测到这个改动。

相关问题

html 中vue3获取动态创建ref节点属性节点

可以使用 `reactive` 函数来创建响应式对象，然后在动态创建的节点上使用 `v-bind` 指令将响应式对象中的属性绑定到节点的属性上。

例如，在 Vue 3 中可以这样实现：

<template>
  <div ref="myRef" :class="myClass"></div>
</template>

<script>
import { reactive, onMounted } from 'vue';

export default {
  setup() {
    const state = reactive({
      myClass: 'red',
    });

    onMounted(() => {
      // 获取动态创建的节点
      const myRef = this.$refs.myRef;
      // 修改响应式对象中的属性
      state.myClass = 'blue';
      // 查看节点的属性是否更新
      console.log(myRef.className); // 输出 'blue'
    });

    return {
      myClass: state.myClass,
    };
  },
};
</script>

在上面的例子中，我们创建了一个响应式对象 `state`，它有一个属性 `myClass`，初始值为 `red`。在模板中，我们使用 `v-bind` 指令将 `myClass` 属性绑定到了动态创建的节点的 `class` 属性上。在 `onMounted` 钩子函数中，我们获取了动态创建的节点，修改了 `myClass` 属性的值，然后查看了节点的 `className` 属性，发现它已经更新为 `blue`。