面试题：Vue中如何监听多层级嵌套数据

Question

在Vue项目中，有一个对象data，其结构为{parent: {child: {grandchild: 'value'}}}，请阐述如何使用Vue的侦听器（watch）来监听grandchild值的变化，并给出具体代码示例。

Answer 1

1. 阐述监听方式：
   • 在Vue中，使用watch选项来监听对象属性的变化。对于嵌套较深的属性grandchild，需要使用深度监听。因为默认情况下，Vue的watch只监听对象的引用变化，不监听对象内部属性的变化。通过设置deep: true，可以实现对对象内部属性的深度监听。
2. 具体代码示例：

<template>
  <div>
    <!-- 这里可以添加一些与数据交互的UI元素，比如展示grandchild的值 -->
    <p>Grandchild value: {{ data.parent.child.grandchild }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        parent: {
          child: {
            grandchild: 'value'
          }
        }
      }
    };
  },
  watch: {
    'data.parent.child.grandchild': {
      handler(newValue, oldValue) {
        console.log('Grandchild value has changed. New value:', newValue, 'Old value:', oldValue);
      },
      deep: true
    }
  }
};
</script>