Vue 3 Composition API 中正确访问 ref 对象的响应式值-js教程-PHP中文网

Vue 3 Composition API 中正确访问 ref 对象的响应式值

在 Vue 3 模板中直接使用 ref 变量时无需 .value，而脚本中必须显式调用；若误在模板中写 habits.value.length，会导致 undefined 报错，因 Vue 会自动解包 ref。

在 vue 3 模板中直接使用 `ref` 变量时无需 `.value`，而脚本中必须显式调用；若误在模板中写 `habits.value.length`，会导致 `undefined` 报错，因 vue 会自动解包 ref。

在 Vue 3 Composition API 中，`ref` 创建的响应式变量在**模板（template）中是自动解包的**——即你只需写 `habits.length` 或 `habit.habitName`，Vue 会隐式读取 `habits.value`；但在 `<script setup>` 内部（如 `watchEffect`、事件处理函数等），必须显式使用 `.value` 访问或修改其内部值。这是初学者高频踩坑点，也是你遇到 `TypeError: $setup.habits.value is undefined` 的根本原因：模板中错误地写了 `v-if="habits.value.length"`，而此时 `habits` 初始值为 `JSON.parse(localStorage.getItem('habits'))` ——当 localStorage 为空或解析失败时，该表达式返回 `null` 或 `undefined`，导致 `ref(null)` 初始化后 `.value` 为 `null`，后续 `.length` 触发报错。 <p>更关键的是，原始代码存在<strong>初始化竞态风险：<code>let habits = ref(JSON.parse(localStorage.getItem('habits'))) 在组件挂载前执行，若 <code>localStorage.getItem('habits') 返回 <code>null（如首次访问），<code>JSON.parse(null) 会返回 <code>null，<code>ref(null) 的 <code>.value 即为 <code>null，此时 <code>habits.value.length 必然报错。因此，健壮做法是提供默认值：</script>

const habits = ref([]) // 初始化为空数组，确保 .length 始终可用

同时，watchEffect 会自动追踪 localStorage.getItem('habits') 的读取（但注意：它不响应 localStorage 的外部变更，仅响应代码中显式调用）。为提升可靠性，建议补充解析异常处理：

watchEffect(() => {
  const raw = localStorage.getItem('habits')
  try {
    habits.value = raw ? JSON.parse(raw) : []
  } catch (e) {
    console.warn('Failed to parse habits from localStorage:', e)
    habits.value = []
  }
})

此外，模板中其他需修正的点：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

v-if="editingHabit.value !== habit" → v-if="editingHabit !== habit"（editingHabit 是 ref({})，模板中自动解包）
v-model.lazy="editingHabit.value.habitName" → v-model.lazy="editingHabit.habitName"（同理，解包后直接访问属性）
避免在 v-for 中使用非唯一 :key（如 habit.habitName 若存在重复名称将引发警告），建议改用索引或添加唯一 ID 字段。

最后，editHabit 中的 addEventListener 存在内存泄漏风险：每次调用都新增监听器，却未移除旧监听器。推荐改用 @keydown.enter 修饰符替代原生事件监听：

<input v-else :id="habit.habitName" v-model.lazy="editingHabit.habitName"> {
    const index = habits.value.findIndex(h => h.habitName === habit.habitName)
    habits.value[index].habitName = editingHabit.habitName
    localStorage.setItem('habits', JSON.stringify(habits.value))
    editingHabit.value = null
  }" 
  type="text"
>

总结：Vue 3 的 ref 解包规则是「模板自动、脚本手动」；始终为 ref 提供安全初始值（如 [] 或 {}）；对 localStorage 读取做空值与 JSON 异常防护；优先使用 Vue 原生事件修饰符而非手动 DOM 操作，以保障响应式与可维护性。