Vue 进阶面试题, Vue 如何监听对象或数组某个属性的变化?

Step 1

Q:: Vue 如何监听对象或数组某个属性的变化？

A:: 在 Vue 2 中，使用 Vue.set() 或 this.$set() 方法来为新属性添加响应式特性。对于数组，使用 Vue.set() 或直接使用 Vue 提供的变异方法（如 push()、pop()、splice() 等）来确保变化是响应式的。在 Vue 3 中，reactive() 和 ref() 可以帮助监听对象或数组的变化，而 Proxy 也实现了对对象的深度监听。

Step 2

Q:: 为什么在 Vue 2 中，直接给对象添加新属性不会触发视图更新？

A:: 在 Vue 2 中，Vue 通过 Object.defineProperty 的 getter 和 setter 来实现响应式系统，但它的限制是无法检测到对象新属性的添加或删除。这是因为 Object.defineProperty 只能劫持已经存在的属性。Vue 为了解决这个问题，引入了 Vue.set() 方法。

Step 3

Q:: 如何监听嵌套对象或数组内部属性的变化？

A:: 在 Vue 2 中，可以通过递归地使用 Vue.set() 来手动处理嵌套对象的响应式。在 Vue 3 中，reactive() 函数能够深度监听对象的所有层级变化。同时，toRefs() 可以帮助将嵌套对象中的每一个属性都转化为响应式的 ref 对象。