Vue 基础面试题, 为什么 Vue 中给对象添加新属性后,界面没有刷新?
Vue 基础面试题, 为什么 Vue 中给对象添加新属性后,界面没有刷新?
QA
Step 1
Q:: 为什么 Vue 中给对象添加新属性后，界面没有刷新？
A:: 在 Vue 中，当你向一个响应式对象添加一个新属性时，该属性并不会被 Vue 的响应式系统所追踪。这是因为 Vue 是通过 Object.defineProperty 进行响应式绑定的，只有在 Vue 初始化时已经存在的属性才会被追踪。如果需要让新添加的属性也能够响应式更新，你可以使用 Vue.set(obj, 'newProp', value) 或者通过 this.$set(this.obj, 'newProp', value) 来确保新属性能够被 Vue 的响应式系统追踪。此外，在 Vue 3 中，响应式系统进行了更新，使用 Proxy 对象替代了 Object.defineProperty，从而解决了这个问题。
Step 2
Q:: Vue 2.x 中的响应式系统是如何工作的？
A:: Vue 2.x 的响应式系统主要是通过 Object.defineProperty 来劫持对象的 getter 和 setter，从而实现对数据的追踪和更新。每个属性在初始化时都会被 Vue 绑定到一个 Dep（依赖收集器）中，当属性发生变化时，Dep 会通知所有依赖这个属性的 watcher（观察者）进行视图更新。这个机制是 Vue 2.x 实现响应式数据的核心。
Step 3
Q:: 如何处理 Vue 对象中属性的删除问题？
A:: 与添加新属性类似，Vue 对删除对象中的属性也不能进行自动追踪和更新。在 Vue 2 中，如果你需要删除一个对象的属性，并希望界面更新，你可以使用 Vue.delete(obj, 'propName') 或 this.$delete(obj, 'propName')。在 Vue 3 中，由于响应式系统的改进，删除属性也能被正确地追踪到。
Step 4
Q:: Vue 中如何监听对象或数组的变化？
A:: 在 Vue 2 中，可以通过 watch 选项来监听对象或数组的变化。然而，如果是对象的深层次属性变化，默认情况下 Vue 并不会追踪，除非你设置 deep: true。在 Vue 3 中，watch 选项的 API 进行了扩展，支持更灵活的监听方式。此外，你也可以使用 computed 计算属性来追踪特定的属性变化，特别是当你只关心对象或数组中的部分属性时。