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)`）通常不会触发视图更新，除非有其他副作用导致数据变化检测到这个改动。

相关问题

vue树形菜单增加节点删除及拖动排序

### 使用 SortableJS 和 Vue 实现树形菜单节点删除和拖动排序

为了在 Vue 中实现树形菜单的节点删除和拖动排序功能，可以借助 `SortableJS` 库来简化 DOM 拖放操作。以下是具体实现方法：

#### 安装依赖
首先安装所需的 npm 包：

npm install sortablejs vue.draggable.next

#### 创建组件结构
创建一个名为 `TreeMenu.vue` 的组件文件，在其中定义基本模板结构。

#### 组件代码示例
下面是一个完整的 Vue 组件实例，展示了如何集成这些特性[^1]：

<template>
  <div class="tree-menu">
    <ul ref="menuList" v-if="items.length > 0">
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}
        <!-- 添加删除按钮 -->
        <button @click.prevent="removeItem(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
// 引入我们封装的表单拖拽函数
import Sortable from 'sortablejs';

const menuList = ref(null);
let items = reactive([
  { name: "Node A" },
  { name: "Node B" },
  { name: "Node C" }
]);

function removeItem(index: number): void {
  items.splice(index, 1); // 移除指定索引处的项
}

onMounted(() => {
  new Sortable(menuList.value, {
    animation: 150,
    ghostClass: 'ghost',
    onEnd({ newIndex, oldIndex }) {
      if (newIndex === null || oldIndex === null) return;
      
      const movedItem = items.splice(oldIndex, 1)[0];
      items.splice(newIndex, 0, movedItem);
    }
  });
});
</script>

<style scoped>
.tree-menu ul li button {
  margin-left: 8px;
}
.ghost {
  opacity: 0.5;
  background-color: lightblue !important;
}
</style>

该代码片段实现了以下功能：
- 利用了 `ref` 来获取列表容器元素并初始化 `Sortable`.
- 当页面加载完成时调用 `onMounted()` 钩子设置可拖拽属性.
- 提供了一个简单的移除逻辑用于处理点击事件触发后的数据更新.

通过这种方式可以在不破坏原有 HTML 结构的情况下轻松添加交互效果[^2].

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`。