Vue3中onMounted中获取props为null的处理方法

用户9914333

发布于 2024-04-28 10:27:12

1090

发布于 2024-04-28 10:27:12

文章被收录于专栏：bug收集bug收集

问题描述：

在Vue3项目中，父组件向子组件传递数据，子组件中的onMounted函数中进行打印输出，结果为null

原因：

要知道具体的原因，需要先知道父子组件的生命周期执行顺序

挂载阶段：

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMouted->子mounted->父mounted

更新阶段：

父beforeUpdated->子beforeUpdate->子updated->父updated

根据上面的生命周期函数了解到，子mounted在父mounted之前，所以要想在子mounted中得到数据的话，需要保证在这个周期函数调用时存在。如果不能确定数据得到的时间，则会出现props为null的情况。

解决方案：

方法一：使用watch

用watch来监听props中值是否有变化

方法二（推荐）：使用watchEffect

watchEffect(() => {
  console.log(props)
});

扩展：watchEffect的用法

在Vue 3的Composition API中，watchEffect方法是一个强大的工具，用于观察和响应Vue组件中的响应式数据的变化。

watchEffect方法的核心原理是基于Vue 3的响应式系统。当我们在watchEffect的回调函数中使用响应式数据时，Vue会自动收集这些数据的依赖关系。一旦这些依赖项的值发生变化，watchEffect将自动重新执行回调函数，从而确保我们的代码能够响应数据的变化。

例1：单个响应值

import { reactive, watchEffect } from 'vue';  
  
const state = reactive({ count: 0 });  
  
watchEffect(() => {  
  console.log('count:', state.count);  
});  
  
// 修改count的值，将会触发watchEffect重新执行  
state.count++;

例2：多个响应值

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：停止观察响应式数据的变化

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();

苟有恒 , 何必三更眠五更起

本文参与?腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-04-22，如有侵权请联系?cloudcommunity@tencent.com 删除

null