Vue 进阶面试题, Vue 中给 data 的对象添加新属性时会发生什么?如何解决?

Step 1

Q:: Vue 中给 data 的对象添加新属性时会发生什么？如何解决？

A:: 在 Vue 中，data 对象的属性在组件实例化时会被 Vue 进行响应式处理。然而，如果在实例化后动态添加新属性，Vue 并不会自动将其转化为响应式属性。因此，添加的新属性不会触发视图的更新。为了解决这个问题，可以使用 Vue.set() 方法手动将新属性添加到响应式系统中。具体语法为：Vue.set(this.data, 'newProperty', value)。这种方式确保新属性被添加为响应式属性，视图会随之更新。

Step 2

Q:: 为什么 Vue 不能自动检测到新属性的添加？

A:: Vue 采用的是基于 Object.defineProperty 的响应式系统，在初始化 data 对象时，Vue 会遍历对象的属性并使用 getter 和 setter 方法将其转化为响应式属性。然而，由于 JavaScript 的局限性，Object.defineProperty 无法检测对象属性的添加或删除，因此 Vue 无法在对象实例化后自动追踪新添加的属性。

Step 3

Q:: 除了使用 Vue.set()，还有哪些方式可以使新属性响应式？

A:: 除了 Vue.set()，还可以通过将原有对象替换为一个新对象来解决。例如，可以使用 this.data = Object.assign({}, this.data, { newProperty: value })，或者在 Vue 3 中，Vue 采用了基于 Proxy 的响应式系统，这种系统可以动态追踪属性的添加，因此不再需要 Vue.set()。

Step 4

Q:: Vue 3 中的响应式系统是如何改进的？

A:: 在 Vue 3 中，Vue 采用了 Proxy 作为响应式系统的基础。Proxy 可以直接拦截对对象的所有操作（包括属性添加和删除），因此 Vue 3 能够自动将新添加的属性转化为响应式，无需再使用 Vue.set()。这显著简化了开发流程，避免了 Vue 2 中需要手动添加响应式属性的限制。