Vue3中ref在浏览器页面刷新时丢失值（Vite环境）求助

你当前的代码是直接在组件初始化时用props.tableRows初始化localRows的ref：

<script setup>
import { ref } from 'vue';

const props = defineProps({
    tableRows: {
        type: Array,
    },
});

const localRows = ref(props.tableRows);
</script>

出现热重载有效、刷新页面失效的原因主要有这几点：

• 初始化时机不匹配：刷新页面是全新加载流程，如果父组件是通过异步请求（比如接口调用）获取tableRows数据，组件初始化时父组件的请求可能还没返回，此时props.tableRows还是默认的空值或undefined，localRows的ref只会在初始化时赋值一次，把这个无效值存进去。而热重载时，父组件的状态已经被保留，props.tableRows已有有效数据，所以初始化能拿到值。

• onMounted无法覆盖异步场景：就算把赋值逻辑放到onMounted里，只要父组件的tableRows是异步加载的，onMounted执行时请求大概率还没完成，props.tableRows依然没有有效数据；而且onMounted只执行一次，后续父组件数据加载完成、props更新时，不会再次触发赋值，localRows自然还是没值。

• 缺少props变化的监听：你当前的写法没有建立props.tableRows和localRows的响应式关联，当props后续更新时，localRows不会自动同步新值。

内容的提问来源于stack exchange，提问作者Tamás László