Vue 基础面试题, 为什么 Vue 中给对象添加新属性后界面不刷新?

Step 1

Q:: 为什么 Vue 中给对象添加新属性后界面不刷新？

A:: 这是因为 Vue 的响应式系统是基于对象的属性是否在对象创建时就存在来工作的。Vue 通过 Object.defineProperty 实现对对象属性的劫持，当一个对象在实例化时已经存在的属性会被转换为响应式属性。如果在对象创建后动态添加新的属性，由于该属性没有被 Vue 劫持，因此不会触发视图更新。要解决这个问题，可以使用 Vue.set 方法或者直接使用 this.$set 将新属性添加到响应式对象中。

Step 2

Q:: 如何解决 Vue 中无法监听到对象新添加属性的问题？

A:: 可以使用 Vue.set 方法或者 this.$set 方法来手动将新的属性添加到响应式对象中。Vue.set(target, propertyName, value) 方法可以确保新添加的属性也是响应式的，能够触发视图更新。

Step 3

Q:: Vue.set 和 this.$set 的区别是什么？

A:: Vue.set 是全局方法，可以在任何地方调用。而 this.$set 是 Vue 实例的方法，通常在组件内部使用。它们的功能基本相同，都是为了在对象上动态添加响应式属性。

Step 4

Q:: Vue 的响应式系统是如何实现的？

A:: Vue 的响应式系统主要依赖于 Object.defineProperty（Vue 2.x）和 Proxy（Vue 3.x）。通过劫持对象属性的 getter 和 setter，Vue 能够在属性被访问和修改时自动追踪依赖，并在数据变化时通知视图更新。Vue 3.x 使用的 Proxy 可以直接监听对象的新增属性和删除属性，克服了 Vue 2.x 的一些限制。