Vue 进阶面试题, 什么情况下 Vue 能监听到数组或对象变化,什么情况监听不到?无法监听时如何解决?

Step 1

Q:: 什么情况下 Vue 能监听到数组或对象变化？

A:: Vue 使用 Object.defineProperty 实现响应式，能监听到对象的属性和数组的方法（如 push、pop、shift、unshift、splice、sort、reverse）所引发的变化。因此，对象的已有属性和数组的这些方法操作是可以被 Vue 监听到的。

Step 2

Q:: 什么情况 Vue 无法监听到数组或对象的变化？

A:: Vue 无法监听到的变化包括：直接修改数组的索引（如 arr[1] = 'newValue'）和给对象动态添加新属性（如 obj.newProp = 'newValue'）。这是因为 Vue 初始化时只对现有的属性和数组方法进行了响应式处理，动态添加或直接修改索引不会触发重新渲染。

Step 3

Q:: Vue 无法监听到对象或数组变化时如何解决？

A:: Vue 提供了 Vue.set（或 this.$set）方法，可以通过它来为对象动态添加响应式属性，或者设置数组特定索引处的值，例如 Vue.set(obj, 'newProp', value) 或 Vue.set(arr, index, newValue)。对于对象，可以使用 Object.assign 创建一个新对象，或者用 Vue3 的 Proxy 代理来解决这个问题。