Vue页面刷新后修改Props值及onMounted中Props未定义问题解决

一、解决onMounted中account.value.date返回undefined的问题 #

出现这个问题的核心原因是：account作为props可能是异步加载的（比如父组件从接口请求数据后才传入），而onMounted钩子执行时，父组件还没完成数据传递，导致account.value为undefined，进而account.value.date也取不到值。

以下是几种可行的解决方法：

1. 用watch监听account的变化 #

通过监听account的更新，在它有值时再执行日期格式化逻辑，同时开启immediate确保初始化时也会触发一次：

import { ref, watch } from 'vue'

const props = defineProps({
  account: Object,
})

const { account } = toRefs(props);
const accountDate = ref("")

// ... 你的formatDate函数不变

watch(account, (newAccount) => {
  if (newAccount?.date) {
    accountDate.value = formatDate(newAccount.date)
    console.log(newAccount.date)
  }
}, { immediate: true })

2. 给account设置默认值 #

在定义props时给account设置默认空对象，避免它直接是undefined：

const props = defineProps({
  account: {
    type: Object,
    default: () => ({ date: "" }) // 初始化空对象，防止undefined
  },
})

3. 父组件中用v-if控制子组件挂载时机 #

如果父组件的account是异步获取的，在父组件模板里加判断，确保account存在后再渲染子组件：

<!-- 父组件模板 -->
<YourChildComponent v-if="account" :account="account" />

这样子组件只会在account有值时才挂载，onMounted里就能正常访问account.value.date。

4. 用可选链操作符做安全访问 #

在访问属性时加上可选链，防止因undefined报错，同时做存在性判断：

onMounted(() => {
  if (account.value?.date) {
    accountDate.value = formatDate(account.value.date)
    console.log(account.value.date)
  }
})

二、页面刷新后修改Props的值 #

Vue遵循单向数据流规则，子组件不能直接修改props的值，必须通过以下方式处理：

1. 触发父组件更新Props #

子组件通过emit事件通知父组件，由父组件负责更新数据源：

// 子组件中
import { ref, toRefs } from 'vue'

const props = defineProps({
  account: Object,
})
const emit = defineEmits(['update:account'])

const { account } = toRefs(props);
const accountDate = ref("")

// 示例：当输入框修改后，通知父组件更新account
const handleDateChange = (newDate) => {
  accountDate.value = newDate
  // 复制原account并更新date，避免直接修改props
  const updatedAccount = { ...account.value, date: newDate }
  emit('update:account', updatedAccount)
}

父组件接收事件并更新自身的account：

<!-- 父组件模板 -->
<YourChildComponent 
  :account="account" 
  @update:account="account = $event" 
/>

2. 复制Props到本地ref修改（本地独立场景） #

如果刷新后只是子组件本地需要修改，不需要同步回父组件，可以把props的值复制到本地ref中：

import { ref, toRefs } from 'vue'

const props = defineProps({
  account: Object,
})

const { account } = toRefs(props);
// 复制props的account到本地ref
const localAccount = ref({ ...account.value })

// 直接修改本地ref的值
const updateLocalDate = (newDate) => {
  localAccount.value.date = newDate
}

注意：如果父组件后续更新account，子组件的localAccount不会自动同步，需要加watch监听props变化来同步：

watch(props.account, (newAccount) => {
  localAccount.value = { ...newAccount }
}, { deep: true }) // deep: true 监听对象内部属性变化

内容的提问来源于stack exchange，提问作者Julián Álvarez