Vue 3 开发中遇到的报错（2）

一、响应式系统相关

Cannot read property 'value' of null
场景：组合式 API 中访问 ref 的时机不当
解决：

vue 复制代码

<script setup>
import { ref, onMounted } from 'vue'
const myRef = ref(null)

onMounted(() => {
  console.log(myRef.value) // 确保在挂载后访问
})
</script>
<template>
  <div ref="myRef"></div>
</template>

响应式对象解构丢失响应性
隐秘点 ：使用 ES6 解构 reactive 对象
正确做法：

javascript 复制代码

import { reactive, toRefs } from 'vue'

const state = reactive({ count: 0 })
// 错误：const { count } = state 
const { count } = toRefs(state) // 保持响应性

二、组合式 API 陷阱

provide/inject 未生效
常见原因 ：未在顶层调用 provide

javascript 复制代码

// 错误：在条件语句中调用
if (condition) {
  provide('key', value) // 将失效
}

异步组件 Suspense 报错
隐秘错误：未处理异步边界

vue 复制代码

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    Loading... <!-- 必须提供降级内容 -->
  </template>
</Suspense>

三、模板编译问题

v-model 参数不匹配
Vue 3 变更：需显式指定参数

vue 复制代码

<!-- 错误：<MyComponent v-model="value" /> -->
<MyComponent v-model:title="value" /> <!-- 正确 -->

<script setup> 的变量未暴露
隐秘点 ：使用 $refs 访问子组件方法

vue 复制代码

<!-- 子组件 -->
<script setup>
defineExpose({ publicMethod: () => {} }) // 必须显式暴露
</script>

<!-- 父组件 -->
<Child ref="childRef" />
<script setup>
const childRef = ref(null)
childRef.value?.publicMethod() // 安全访问
</script>

四、状态管理相关

Pinia 的 storeToRefs 误用
错误现象：修改属性不触发更新

javascript 复制代码

import { storeToRefs } from 'pinia'

const store = useStore()
// 错误：const { count } = store
const { count } = storeToRefs(store) // 保持响应性

count.value++ // 正确触发更新

Vuex 4 的 useStore 报错
原因：未在根组件注入 store

js 复制代码

// main.js
import { createApp } from 'vue'
import store from './store'
createApp(App).use(store).mount('#app')

五、TypeScript 特有错误

模板类型推断失败
解决：使用 Volar 插件 + 类型声明

vue 复制代码

<script setup lang="ts">
defineProps<{ 
  title: string   // 基于 TS 的类型声明
}>()
</script>

泛型组件类型丢失
方案：使用 h 函数渲染

ts 复制代码

import { h } from 'vue'
const GenericComponent = <T>(props: { data: T[] }) => 
  h('div', props.data.map(d => d.toString()))

六、构建工具相关

process.env 未定义
Vite 方案：

js 复制代码

import.meta.env.VITE_API_KEY // 需使用 VITE_ 前缀

动态导入组件报错
正确写法：

vue 复制代码

<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComp.vue')
)
</script>