面试题：Vue组件动态绑定复杂对象属性的处理

Question

现有一个Vue组件，需要接收一个复杂对象作为属性，该对象包含多个嵌套的键值对。例如：{ info: { name: 'John', age: 30 } } 。要求在组件内能够根据对象内部的不同属性值进行不同的渲染逻辑，并且当外部传入的这个复杂对象发生变化时，组件能正确响应更新。请阐述实现思路，并给出关键代码示例。

Answer 1

实现思路

1. 在Vue组件的props选项中定义接收复杂对象的属性。
2. 使用computed计算属性根据复杂对象内部不同属性值生成不同的渲染数据。
3. 利用Vue的响应式原理，当外部传入的复杂对象发生变化时，计算属性会自动重新计算，从而触发组件重新渲染。

关键代码示例

<template>
  <div>
    <div v-if="isAdult">
      <p>Name: {{ personInfo.name }}, 是成年人</p>
    </div>
    <div v-else>
      <p>Name: {{ personInfo.name }}, 是未成年人</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    complexObj: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    personInfo() {
      return this.complexObj.info;
    },
    isAdult() {
      return this.personInfo.age >= 18;
    }
  }
}
</script>