Posts

Vue 3模板引用通过ref连接声明式代码与DOM或子组件实例，用于自动聚焦、调用子组件方法等。Composition API 3.5+用useTemplateRef，之前需手动声明；Options API用this.$refs。子组件需defineExpose暴露属性，v-for中ref生成数组（顺序可变），函数式ref可动态处理。使用需在挂载后访问，避免null错误。

Vue模板引用可直接访问DOM或子组件实例，用于聚焦元素、初始化第三方库等场景。3.5+组合式API用useTemplateRef，此前版本用ref，选项式API通过this.$refs访问。子组件需defineExpose（组合式）或expose（选项式）暴露内容。v-for中可用数组或函数式引用管理，需避免挂载前访问，且v-for引用数组顺序可能与源数组不一致。

Vue模板引用（Template Refs）通过ref属性实现，用于直接访问DOM元素或子组件实例。Vue3.5+推荐useTemplateRef，旧版用ref变量；支持v-for数组引用、函数绑定及子组件引用（子组件需defineExpose暴露）。适用于自动聚焦、第三方库初始化等场景，需注意挂载后访问及子组件暴露要求。

Vue 3中watch需显式声明监听源（支持新旧值），watchEffect自动收集依赖（立即执行）。避坑：深度监听用精准属性，内存泄漏用stop/onCleanup，高频操作加防抖。调试用Vue DevTools，可结合日志优化。

Vue3侦听器分组件内与Pinia应用：组件内watch需显式依赖，获新旧值，支持深度/立即执行；watchEffect自动追踪依赖，立即执行。Pinia可监听store状态（单个/多个/整个store），如表单数据同步。含深度监听、立即执行及常见报错解决。

Vue 3中，watch需手动指定监听源，惰性执行且可获取新旧值，支持嵌套监听、深度监听及立即执行；watchEffect自动收集依赖，立即执行（无新旧值），支持副作用清理与执行时机调整。选型：特定源或需新旧值用watch，多依赖或自动执行用watchEffect。