Vue 进阶面试题, 什么是 Vue 的 Object.defineProperty?

Step 1

Q:: 什么是 Vue 的 Object.defineProperty？

A:: Vue 使用 Object.defineProperty 实现响应式数据绑定。Object.defineProperty 允许 Vue 通过 getter 和 setter 拦截对对象属性的访问和修改，从而在数据变化时通知视图更新。这种方式为 Vue 的数据驱动视图提供了基础。

Step 2

Q:: Vue 中的 Object.defineProperty 有什么局限性？

A:: Object.defineProperty 的主要局限性是它无法监测数组下标的变化和对象的新增属性。因此，Vue 2 中使用了数组的变异方法（例如 push、pop 等）来手动触发视图更新。Vue 3 则通过 Proxy 彻底解决了这些局限性。

Step 3

Q:: Vue 3 为什么改用 Proxy 而不是继续使用 Object.defineProperty？

A:: Vue 3 选择 Proxy 的原因是 Proxy 可以直接监听整个对象及其属性的变化，而不仅仅是已有的属性。这样可以避免 Vue 2 中的数组下标和对象属性新增问题，并且使得代码更加简洁和高效。

Step 4

Q:: Vue 响应式原理的核心是什么？

A:: Vue 响应式原理的核心是依赖收集和派发更新。通过 Object.defineProperty 或 Proxy 监听数据的变化，当数据发生改变时，Vue 会触发相应的更新函数来更新 DOM 或触发相关的副作用。

Step 5

Q:: 你如何手动为一个 Vue 对象添加一个响应式属性？

A:: 在 Vue 2 中，可以使用 Vue.set(object, key, value) 来手动添加响应式属性。Vue.set 确保新添加的属性能够被侦听并且视图能够响应变化。在 Vue 3 中，由于使用了 Proxy，可以直接通过对象的赋值操作实现响应式。