先说说 VueFlow 是啥玩意儿

VueFlow，顾名思义，就是基于 Vue 的流程图/关系图库。

它把节点、连线、画布这些概念dou抽象成组件。

你只要往 data 里塞点 node、edge， 画布自己就会渲染出来。

说实话，我第一次用的时候也傻傻分不清楚是啥。

后来才发现，它的核心其实就是一个 SVG 画布，配合内部的缩放算法。

所以要想让它随容器大小自适应，关键点就在「视口」这块儿。

容器尺寸变化怎么捕获？

Zui自然的办法，就是用浏览器原生的 ResizeObserver。

这个 API Neng在元素宽高变动时立刻通知你，省去手动监听窗口 resize 那种鸡肋操作。

下面先给个Zui简代码片段：

const containerRef = ref
let ro = null
onMounted => {
  if  {
    ro = new ResizeObserver => {
      // 每次尺寸变化dou调 fitView
      fitView
    })
    ro.observe
  }
})
onBeforeUnmount => {
  ro?.disconnect
})

为什么要加防抖？

ResizeObserver 在拖动窗口边缘时会疯狂触发。

Ru果每一次dou直接调用 fitView，画布会卡得像慢动作电影。

于是我们给它套上个 debounce，200 ms 左右挺合适。

function debounce {
  let timer
  return  => {
    clearTimeout
    timer = setTimeout => fn, delay)
  }
}
const debouncedFit = debounce => fitView)
ro = new ResizeObserver

@pane-ready：首次渲染的黄金时机

VueFlow 在画布初始化完毕后会抛出 @pane-ready 事件。

这时候再去调用 fitView，才Neng确保所有节点Yi经算好尺寸。

function onPaneReady {
  // 首次加载自动适配
  instance.fitView
}

Ru果想偏移一点怎么办？

有时候你想让画布左上角留点空白，这时候Ke以在 fitView 后面再调一次 .panBy.

CSS 那点事儿——别忘了给容器设好宽高

#container { width:100%; height:100%; }

记得把父级也设成百分比或者 flex 布局，不然外层不给力，内部再怎么 fit dou白费。

Sass 小技巧，让容器永远填满视口高度

html, body, #app {
  height: 100%;
}
.flow-wrapper {
  width: 100%;
  height: calc);
}

常见坑 & 疑问大合集 Q：容器初始化时图没有适配？

A：

@pane-ready 没绑定；先补上这个事件再调 fitView；

或者容器本身高度是 auto，导致观察不到变化；加上明确的 height 再试；

If you use SSR, remember to run fitView only on client side.

Q：ResizeObserver 调用太频繁导致卡顿？

A：

- 用 debounce 包一下； - 或者在回调里判断尺寸变化阈值。

Q：为什么百度不收录我的页面？

A：

- 检查 robots.txt，是不是误把页面屏蔽了；

- 再kankan meta 标签里有没有 ；

- Zui后确认页面加载速度够快，否则爬虫可Neng直接放弃。

- 对了还要确保页面内容是真实可读的，而不是全是 JS 动态渲染后才出现的。

- 简单来说百度不收录往往是「可访问性」和「可索引性」出了问题，你把这些坑填平，它就会乖乖来抓取啦。

完整实现示例

小结——几句话搞定自适应

- 用 @pane-ready + fitView, 确保首次加载满屏；

- 用 ResizeObserver + debounce + fitView, 动态调整不卡顿；

- 别忘了 CSS 把父容器撑满，否则算什么自适应？

- 检查 SEO 基础，避免被百度“拒之门外”。

好了这篇文章就写到这儿吧。

Ru果还有啥奇怪的问题，咱们再聊哈——别客气！哈哈~

---