问题描述：
在Vue3项目中，父组件向子组件传递数据 ，子组件中的onMounted函数中进行打印输出，结果为null
原因：
要知道具体的原因，需要先知道父子组件的生命周期执行顺序
挂载阶段：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMouted->子mounted->父mounted
更新阶段：
父beforeUpdated->子beforeUpdate->子updated->父updated
根据上面的生命周期函数了解到，子mounted在父mounted之前，所以要想在子mounted中得到数据的话，需要保证在这个周期函数调用时存在。如果不能确定数据得到的时间，则会出现props为null的情况。
解决方案：
方法一：使用watch
用watch来监听props中值是否有变化
方法二（推荐）：使用watchEffect
代码语言：javascript复制watchEffect(() => {
console.log(props)
});
扩展：watchEffect的用法
在Vue 3的Composition API中，watchEffect方法是一个强大的工具，用于观察和响应Vue组件中的响应式数据的变化。
watchEffect方法的核心原理是基于Vue 3的响应式系统。当我们在watchEffect的回调函数中使用响应式数据时，Vue会自动收集这些数据的依赖关系。一旦这些依赖项的值发生变化，watchEffect将自动重新执行回调函数，从而确保我们的代码能够响应数据的变化。
例1：单个响应值
代码语言：javascript复制import { reactive, watchEffect } from 'vue';
const state = reactive({ count: 0 });
watchEffect(() => {
console.log('count:', state.count);
});
// 修改count的值，将会触发watchEffect重新执行
state.count ;例2：多个响应值
代码语言：javascript复制import { ref, watchEffect } from 'vue';
const value1 = ref(1);
const value2 = ref(2);
watchEffect(() => {
console.log('value1:', value1.value);
console.log('value2:', value2.value);
});
// 修改value1或value2的值，都会触发watchEffect重新执行
value1.value ;
value2.value ;例3：停止观察响应式数据的变化
代码语言：javascript复制import { ref, watchEffect } from 'vue';
const count = ref(0);
const stopWatch = watchEffect(onInvalidate => {
// 当watchEffect重新运行时，之前的onInvalidate函数将被调用
onInvalidate(() => {
console.log('watchEffect stopped');
});
console.log('count:', count.value);
});
// 在某个时机调用stopWatch函数，停止watchEffect的执行
stopWatch();苟有恒 , 何必三更眠五更起
