设想一个使用者编辑页面。接口数据填入表单后使用者点击重置页面应该恢复为空白状态。者重新创建了一份 reactive 对象。 控制台没有报错，输入框却仍然显示原来的姓名和部门。

关键代码与观察点

下面是表单组件中的关键代码。读者需要观察重置函数修改的是表单属性，还是保存表单对象的局部变量。

至于页面初始显示，

姓名：Alice 部门：前端

点击重置后两个输入框可能仍然保持原值。代码确实创建了一个新的响应式对象，但这次赋值没有修改模板上一次渲染时依赖的那组属性。也没有单独产生一次可追踪的状态更新。

一、首次渲染时模板读取的是哪一个对象

reactive 接收一个对象，并返回这个对象的响应式代理。组件模板读取代理上的属性时Vue 会记录本次渲染使用了哪些状态，这些属性后续发生变化时组件才有依据安排更新。按理说，

下面把初始对象单独保存下来观察模板使用的值来自哪里。

说到控制台输出，

true false

form 是响应式对象，而且与传入的原始对象不是同一个引用。模板渲染时读取的是响应式对象上的 name 和 department 

可以把第一次渲染简化为：

模板读取 form.name → Vue 记录当前渲染依赖这个属性 →
模板读取 form.department → Vue 记录第二个属性 →
页面显示 Alice / 前端

从后续执行来看。

form.name = 'Bob'

写入发生在同一个响应式对象上，Vue 能够把这次变化与之前记录的读取关系对应起来组件随后重新渲染。

二、重新赋值改变了局部变量。却没有触发原对象更新

回到最初的重置函数：

这段代码完成了两件事：

• Create a new reactive object.
• The local variable `form` takes on that new reference.

This does not modify old object's properties.

从你可能会发现来看，即使赋值后 console 看似成功，但界面却不刷新！这是因为我们并没有让 Vue 去追踪这个赋值操作。说起来，

为什么？因为普通 JavaScript 的变量赋值不会触发 Vue 的依赖追踪。话说回来，

解决思路这方面。不要直接替换根引用，而是在已有引用上修改字段或使用 ref 包装整个根对象。

三、给原对象的属性赋值为什么能够更新页面