面试题：Vue父子组件数据传递中的边界情况与最佳实践

Question

在Vue父子组件数据传递过程中，可能会遇到props验证失败、子组件异步初始化依赖父组件数据等边界情况。请详细描述这些边界情况会带来什么问题，如何通过代码设计和最佳实践来避免或解决这些问题？并说明在不同Vue版本下，处理方式是否存在差异。

Answer 1

props验证失败带来的问题

1. 数据类型错误：可能导致子组件内部逻辑异常，例如子组件期望接收一个数字类型的prop进行数学运算，但实际接收到字符串，运算会出错。
2. 运行时错误：可能会在控制台抛出警告，影响开发调试体验，且可能导致应用程序在某些情况下崩溃，影响用户体验。

避免props验证失败的方法

1. 使用对象语法进行props验证：

props: {
  propName: {
    type: Number,
    required: true,
    default: 0
  }
}

2. 自定义验证函数：

props: {
  propName: {
    validator: function (value) {
      return value > 0;
    }
  }
}

子组件异步初始化依赖父组件数据带来的问题

1. 数据未及时更新：子组件可能在父组件数据更新前就进行初始化，导致使用的数据过时，影响业务逻辑。
2. 渲染异常：可能会出现子组件渲染不正确，因为依赖的数据未正确加载，页面显示异常。

解决子组件异步初始化依赖父组件数据的方法

1. 使用watch监听父组件数据：

watch: {
  parentData: {
    immediate: true,
    handler(newVal) {
      // 在此处进行异步初始化逻辑
    }
  }
}

2. 使用computed属性：通过computed属性依赖父组件数据，确保数据变化时重新计算。

computed: {
  computedData() {
    return this.parentData;
  }
}

不同Vue版本处理方式的差异

1. Vue 2.x：上述方法在Vue 2.x版本中适用，props验证和数据监听等功能稳定。
2. Vue 3.x：基本原理不变，但在Composition API中，props验证写法略有不同。例如在setup函数中使用defineProps来定义和验证props：

import { defineProps } from 'vue';
const props = defineProps({
  propName: {
    type: Number,
    required: true
  }
});

对于异步依赖，在Vue 3.x中可以在setup函数中使用watch和computed，用法和Vue 2.x类似，但语法上更简洁，例如watch使用方式：

import { watch } from 'vue';
watch(parentData, (newVal) => {
  // 异步初始化逻辑
});