面试题：Vue虚拟DOM中数据更新但视图未更新的常见原因及调试方法

Question

在Vue项目中，有时会遇到数据已经更新，但虚拟DOM所渲染的视图却没有更新的情况。请列举至少两种可能导致此问题的原因，并阐述对应的调试技巧。

Answer 1

可能原因

1. 对象或数组的变更检测问题：Vue 不能检测对象属性的添加或删除，也不能检测数组通过索引直接修改元素或修改数组长度。例如直接使用 obj.newProp = 'newValue' 或 arr[index] = newVal。
2. 计算属性缓存问题：如果计算属性依赖的数据没有发生响应式变化，计算属性不会重新计算，视图也就不会更新。
3. 父子组件传值问题：父组件传递给子组件的数据没有发生变化，子组件依赖此数据渲染视图，当父组件中数据结构改变但值不变时，子组件视图可能不更新。

调试技巧

1. 对象或数组变更检测问题调试：
   • 使用 Vue.set() 或 this.$set() 来添加对象属性，如 Vue.set(obj, 'newProp', 'newValue')。对于数组，可以使用数组的变异方法（如 push、pop、shift、unshift、splice、sort、reverse）来确保视图更新。在代码中排查直接修改对象属性或数组索引的地方并修正。
   • 使用 Vue 的 watch 来监听对象或数组的变化，在 watch 回调中打印相关信息，查看数据变化是否被正确捕获。
2. 计算属性缓存问题调试：
   • 在计算属性函数中添加 console.log，查看计算属性是否被重新计算。
   • 检查计算属性依赖的数据是否正确设置为响应式数据，确保依赖数据变化时能触发计算属性重新计算。
3. 父子组件传值问题调试：
   • 在子组件的 props 选项中添加 watch，监听父组件传递过来的数据变化，在 watch 回调中打印信息，确认数据是否正确接收和变化。
   • 在父组件中修改传递给子组件数据时，确保数据变化是 Vue 能够检测到的响应式变化，例如使用 Vue.set 等方法修改对象数据结构。