Vue是否适合开发支持100%动态布局的网站搭建工具？

Hey there! I’ve built similar no-code page builders with Vue before, so I totally get where you’re coming from—Vue’s declarative model feels like it’s fighting against the direct DOM manipulation you need for a fully dynamic drag-and-drop builder. Let’s break down how to reconcile these two:

Instead of manipulating DOM nodes directly, treat every draggable element (Div, Container, Section) as a reactive object. Each object should hold all the data needed to render and edit the element—think id, type, style (width, position, background, etc.), children, and layout-specific properties.

// Example reactive state for your builder
const blocks = ref([
  {
    id: 'section-1',
    type: 'section',
    style: {
      width: '100%',
      minHeight: '400px',
      backgroundColor: '#f8f9fa',
      padding: '2rem'
    },
    children: []
  }
])

When you update this state (like changing a block’s position or adding a child), Vue automatically handles re-rendering the DOM. Your drag-and-drop logic only needs to modify these reactive objects—not touch the DOM directly.

To render arbitrary element types without hardcoding templates, use Vue’s <component> tag to map your reactive block objects to actual DOM elements. This works recursively too, so you can nest blocks inside containers/sections.

<template>
  <div class="builder-canvas">
    <!-- Render top-level blocks -->
    <component
      v-for="block in blocks"
      :key="block.id"
      :is="block.type"
      :style="block.style"
      @dragstart="handleDragStart(block)"
      @dragover.prevent
      @drop="handleDrop(block)"
    >
      <!-- Recursively render child blocks -->
      <component
        v-for="child in block.children"
        :key="child.id"
        :is="child.type"
        :style="child.style"
      />
    </component>
  </div>
</template>

This keeps your rendering declarative while giving you full control over what elements appear on the page.

Instead of moving DOM nodes around directly, update your reactive state when a user drags a block. For example:

• When dragging a block to a new position in the same container: reorder the children array
• When dropping a block into a different container: remove it from its original parent’s children and add it to the new parent’s
• When using absolute positioning: update the block’s style.left and style.top properties

Here’s a quick example of a drop handler:

const draggedBlock = ref(null);

const handleDragStart = (block) => {
  draggedBlock.value = block;
};

const handleDrop = (targetBlock) => {
  if (!draggedBlock.value) return;

  // Remove from original parent
  const originalParent = blocks.value.find(b => b.children.includes(draggedBlock.value));
  if (originalParent) {
    originalParent.children = originalParent.children.filter(b => b.id !== draggedBlock.value.id);
  }

  // Add to target block's children
  targetBlock.children.push(draggedBlock.value);
  draggedBlock.value = null;
};

Vue will instantly reflect these state changes in the DOM—no manual DOM manipulation required.

If you need to do something that reactive state can’t handle (like measuring element dimensions for snap-to-grid), use Vue’s ref to access the DOM element directly. Just make sure these manipulations are tied to state changes, not done in isolation.

<template>
  <div ref="canvasRef" class="builder-canvas">
    <!-- Blocks go here -->
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const canvasRef = ref(null);
const blocks = ref([]);

// Trigger DOM measurements when blocks change
watch(blocks, () => {
  if (canvasRef.value) {
    // Example: Get canvas dimensions to calculate snap positions
    const { width, height } = canvasRef.value.getBoundingClientRect();
    // Do something with width/height...
  }
}, { deep: true });
</script>

Keep these direct DOM touches minimal—they should complement your reactive state, not replace it.

To avoid relying on pre-defined layouts, let users control layout properties via the reactive style object. For example, a Container block could let users edit gridTemplateColumns, flexDirection, or gap—giving them full control over layout without hardcoded templates.

The core idea is: let reactive state drive everything, and let Vue handle the DOM. This way you get the maintainability of Vue’s paradigm while still building a fully dynamic, Wix-like tool.

内容的提问来源于stack exchange，提问作者NvdB31