Vue 3.6 预发布观察：做字段级更新，先别把内部 API 当成公共接口

一张长表单里只改了城市字段，却连带触发了整页计算。此时值得查的是依赖关系、组件边界和验证范围，而不是先给框架判一个“每次必扫全树”的罪名。虚拟 DOM 应用能通过合理边界减少工作，原生 DOM 也会被昂贵的业务逻辑拖慢。

Vue 在 2026 年 10 月 23 日发布了 v3.6.0-rc.13。这是预发布版本。查看该标签的包导出与 runtime-vapor 源码后，不能把自创的 createSignal、Signal.set 或 vue/vapor 路径当成已经可用的公共承诺；编译器使用的辅助函数，也不等于业务层应该手工拼接的接口。

先用一个不依赖框架的模型说明粒度

下面不是 Vapor 的替代实现，也不是 Vue 跑分。它只演示“字段订阅者只接收自己字段的变化”。真实界面可以把订阅回调接到适当的组件状态或 DOM 适配层。

import assert from 'node:assert/strict';
function createFields(initial) {
const values = new Map(Object.entries(initial));
const listeners = new Map();
return {
get(id) { if (!values.has(id)) throw new Error('unknown field'); return values.get(id); },
set(id, value) {
if (!values.has(id)) throw new Error('unknown field');
if (Object.is(values.get(id), value)) return;
values.set(id, value);
for (const subscription of […(listeners.get(id) ?? [])]) {
if (subscription.active) subscription.notify(value);
}
},
subscribe(id, cb) {
if (!values.has(id)) throw new Error('unknown field');
if (typeof cb !== 'function') throw new TypeError('listener must be a function');
const group = listeners.get(id) ?? new Set();
const subscription = { notify: cb, active: true };
listeners.set(id, group); group.add(subscription);
return () => {
if (!subscription.active) return;
subscription.active = false;
group.delete(subscription);
if (!group.size && listeners.get(id) === group) listeners.delete(id);
};
}
};
}
const fields = createFields({city:'杭州', taxId:''});
const cityEvents = [], taxEvents = [];
const stop = fields.subscribe('city', v => cityEvents.push(v));
const stopTax = fields.subscribe('taxId', v => taxEvents.push(v));
fields.set('city', '苏州');
fields.set('city', '苏州');
assert.deepEqual(cityEvents, ['苏州']);
assert.deepEqual(taxEvents, []);
stop(); fields.set('city', '宁波');
assert.equal(cityEvents.length, 1);
assert.throws(() => fields.set('missing', 1), /unknown/);
assert.throws(() => fields.subscribe('missing', () => {}), /unknown/);
assert.throws(() => fields.subscribe('city', null), /listener/);
stopTax(); fields.set('taxId', 'new');
assert.deepEqual(taxEvents, []);

// An old cleanup must not remove a newly created subscription group.
const remounted = createFields({ x: 0 });
let freshEvents = 0;
const oldStop = remounted.subscribe('x', () => {});
oldStop();
const freshStop = remounted.subscribe('x', () => freshEvents++);
oldStop(); remounted.set('x', 1);
assert.equal(freshEvents, 1);
freshStop(); freshStop(); remounted.set('x', 2);
assert.equal(freshEvents, 1);

// Each subscribe call has its own lifetime, even for the same callback.
const duplicated = createFields({ x: 0 });
let duplicateCalls = 0;
const callback = () => duplicateCalls++;
const stopA = duplicated.subscribe('x', callback);
const stopB = duplicated.subscribe('x', callback);
duplicated.set('x', 1); assert.equal(duplicateCalls, 2);
stopA(); duplicated.set('x', 2); assert.equal(duplicateCalls, 3);
stopA(); duplicated.set('x', 3); assert.equal(duplicateCalls, 4);
stopB(); duplicated.set('x', 4); assert.equal(duplicateCalls, 4);

// Removal takes effect during dispatch; additions wait for the next change.
const lifecycle = createFields({ x: 0 });
const order = [];
let stopLate, stopAdded;
const stopEarly = lifecycle.subscribe('x', () => {
order.push('first');
stopLate();
if (!stopAdded) stopAdded = lifecycle.subscribe('x', () => order.push('added'));
});
stopLate = lifecycle.subscribe('x', () => order.push('late'));
lifecycle.set('x', 1); assert.deepEqual(order, ['first']);
lifecycle.set('x', 2); assert.deepEqual(order, ['first', 'first', 'added']);
stopEarly(); stopEarly(); stopAdded(); lifecycle.set('x', 3);
assert.deepEqual(order, ['first', 'first', 'added']);
console.log('field isolation, idempotent cleanup and dispatch lifetime checks passed');

每次订阅都有独立记录。即使两次传入同一个回调，两个清理句柄也互不影响。组件销毁时应调用对应的清理函数；重复清理可以安全返回，旧句柄不能删除重新挂载后建立的新集合。

通知时先取订阅快照，再检查记录是否仍然有效。因此，派发途中解绑的回调会被跳过，途中新增的订阅从下一次字段变更开始参与。这样既保留稳定的通知范围，也让生命周期操作立即生效。

这段模型刻意没有解决派生字段。若“省份变化后城市失效”，就要显式建立依赖，把需要重算的子图交给规则引擎；不能为了追求局部更新，让旧城市值悄悄留在提交结果里。回调抛异常、递归写入、批量提交和撤销同样需要额外调度策略。

评估新编译模式，需要两份证据

第一份是接口证据：锁定版本、通过公开入口构建、按该版本的编译约定生成组件。第二份是页面证据：同一数据、同一设备与输入动作，记录脚本、布局、绘制、内存及输入法组合事件。只计一次赋值耗时，无法回答用户输入是否顺畅。

如果现有页面慢在全表校验、重复请求或大面积布局失效，切换渲染模式也可能治不到问题。应先用 DevTools Performance定位，再决定是否值得迁移。

本例只在 Node 中验证订阅隔离与清理，未安装 Vue、未构建 Vapor 组件、未做浏览器性能对比。没有真实测量，就不写“快了若干倍”。预发布值得试验，试验也应该留下可回退的边界。