菩提自性1. Vue3模板ref的核心作用与常见误区
在Vue3的组合式API中，模板ref扮演着双重角色：它既能管理基本数据类型的响应式状态，又能直接操作DOM元素。很多刚接触Vue3的开发者容易混淆这两种用法，特别是在处理DOM操作时经常遇到ref.value为null的情况。这就像你拿着门禁卡准备刷开小区大门，却发现物业还没给你开通权限——不是你的卡有问题，而是使用时机不对。
模板ref获取DOM的典型错误场景是这样的：你在setup函数中声明了const videoRef = ref(null)，然后在模板中给video标签添加了ref属性，迫不及待地在setup函数里直接访问videoRef.value，结果却得到了null。这种挫败感就像你明明按照说明书组装了家具，却发现少了几个关键螺丝孔。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 生命周期视角下的DOM挂载机制
2.1 Vue3生命周期的关键变化
Vue3的生命周期相比Vue2做了重大调整，最显著的变化就是用setup函数替代了原来的created和beforeCreate钩子。这个改变就像把餐厅的备菜区和烹饪区合并了——厨师现在需要同时负责食材准备和烹饪工作。当setup函数执行时，组件实例刚刚开始初始化，模板还没编译，DOM更是远未创建。
通过一个简单的类比可以更好理解：假设组件创建是个建房过程：
- setup阶段：设计师正在画蓝图（创建响应式数据）
- beforeMount：建筑队刚进场（模板编译完成）
- onMounted：房屋完成装修（DOM挂载完毕）
2.2 为什么setup中直接访问ref会失败
当你在setup函数中直接访问ref的value属性时，相当于在打地基的阶段就想安装吊灯。这时候模板虽然定义了<video ref="myRef">，但实际的DOM元素还不存在。Vue3的这种设计其实很合理——它明确区分了逻辑准备阶段和DOM操作阶段，避免了Vue2中可能在created钩子里误操作DOM导致的错误。
我曾在一个视频播放器组件中踩过这个坑：需要在组件加载后自动播放视频，但在setup里直接调用videoRef.value.play()总是报错。通过Chrome调试工具发现，setup执行时video元素的状态是这样的：
javascript复制co