Vue 3中的ref和template refs详解

在Vue 3中，ref和模板引用（template refs）是两个相关但不同的概念，它们在组合式API（Composition API）中扮演着重要角色。

ref - 响应式引用

ref是Vue 3中创建响应式数据的主要方式之一。

基本用法

import { ref } from 'vue'// 创建一个响应式引用const count = ref(0)// 访问或修改值需要使用.valueconsole.log(count.value) // 0count.value++console.log(count.value) // 1

特点

1. 包装原始值：ref可以将基本类型（如数字、字符串、布尔值）转换为响应式对象
2. 需要使用.value：在JavaScript中访问或修改ref值时，必须使用.value属性
3. 在模板中自动解包：在模板中使用时，Vue会自动解包ref，不需要写.value

<template> <div>{{ count }}</div> <!-- 不需要.value --></template>

复杂数据结构

对于对象和数组，ref内部使用reactive来实现响应式：

const user = ref({ name: '张三', age: 30})// 修改属性user.value.age = 31

template refs - 模板引用

模板引用允许你直接访问DOM元素或组件实例。

Vue 2中的使用方式

在Vue 2中，我们通过this.$refs访问模板引用：

<template> <div> <input ref="inputElement"> <ChildComponent ref="childComponent"/> </div></template><script>export default { mounted() { // 访问DOM元素 this.$refs.inputElement.focus() // 访问子组件实例 this.$refs.childComponent.someMethod() }}</script>

Vue 3中的使用方式

在Vue 3的组合式API中，模板引用的使用方式发生了变化：

1. 创建ref变量：首先创建一个ref变量
2. 在模板中绑定：将这个ref变量绑定到元素或组件上
3. 在组件挂载后访问：组件挂载后，ref变量的.value将包含对应的DOM元素或组件实例

<template> <div> <input ref="inputRef"> <ChildComponent ref="childComponentRef"/> </div></template><script setup>import { ref, onMounted } from 'vue'import ChildComponent from './ChildComponent.vue'// 创建模板引用const inputRef = ref(null)const childComponentRef = ref(null)onMounted(() => { // 访问DOM元素 inputRef.value.focus() // 访问子组件实例 childComponentRef.value.someMethod()})</script>

动态模板引用（v-for中使用）

在循环中使用模板引用时，需要使用函数形式的ref：

<template> <div> <ul> <li v-for="(item, i) in list" :key="i" :ref="el => { if (el) itemRefs[i] = el }"> {{ item }} </li> </ul> </div></template><script setup>import { ref, onMounted, onBeforeUpdate } from 'vue'const list = ref(['苹果', '香蕉', '橙子'])const itemRefs = ref([])// 在更新前清空引用数组onBeforeUpdate(() => { itemRefs.value = []})onMounted(() => { console.log(itemRefs.value) // DOM元素数组})</script>

示例：关于v-for生成的ref的复杂例子，Vue2+js移植到Vue3+TS

旧的Vue2+js程序：

<template> <MixerCtrlItem v-if="konvaInitlizedFlag" v-for="(item, index) in inputBottomGroups" :key="index" :ref="`col-${index}`" :x="0" :y="0" :parent="item" :deviceIp="deviceIp" :modelName="modelName" :paramName="paramName" :index="index" :channel="this.colPageIndex * this.pageColCount + index" :ctrlItemType="'mixer-input'" /> <MixerCtrlItem v-if="konvaInitlizedFlag" v-for="(item, index) in outputRightGroups" :key="index" :x="0" :y="0" :ref="`row-${index}`" :parent="item" :deviceIp="deviceIp" :modelName="modelName" :paramName="paramName" :index="index" :channel="this.rowPageIndex * this.pageRowCount + index" :ctrlItemType="'mixer-output'" /> <template v-if="konvaInitlizedFlag" v-for="(row, rowIndex) in centerContentGroupsMap" :key="rowIndex"> <MixerCtrlItem v-for="(item, colIndex) in row" :key="`${rowIndex}-${colIndex}`" :ref="`row-${rowIndex}-col-${colIndex}`" :x="0" :y="0" :parent="item" :deviceIp="deviceIp" :modelName="modelName" :paramName="paramName" :rowIndex="rowIndex" :colIndex="colIndex" :channel="this.rowPageIndex * this.pageRowCount + rowIndex" :extraData2="this.colPageIndex * this.pageColCount + colIndex" :ctrlItemType="'mixer-node'" /> </template></template>

// 使用到ref的位置示例，type获取细节不表const refMap = { 'in-gain': `col-${channel}`, 'out-gain': `row-${channel}`, 'node-gain': `row-${channel}-col-${nodeInputChannel}`, 'in-btn': `col-${channel}`, 'out-btn': `row-${channel}`, 'node-btn': `row-${channel}-col-${nodeInputChannel}`,};const refName = refMap[type];if (!refName) { console.error('Unknown type:', type); return null;}// 处理数组型 ref（v-for 产生的）const refs = this.$refs[refName];

在示例中，需要从Vue 2风格的$refs迁移到Vue 3的模板引用方式。具体步骤：

1. 定义模板引用数组：

const inputGainRefs = ref([])const outputGainRefs = ref([])const nodeGainRefsMap = ref([])

2. 在模板中使用这些引用：

<MixerCtrlItem v-for="(item, index) in inputBottomGroups" :key="index" :ref="el => { if (el) inputGainRefs.value[index] = el }" ...其他属性/>

3. 在需要访问子组件时：

// 访问输入增益组件inputGainRefs.value[0].someMethod()// 访问节点增益组件nodeGainRefsMap.value[rowIndex][colIndex].someMethod()

总结

1. ref：用于创建响应式数据，在JavaScript中需要使用.value访问
2. template refs：用于访问DOM元素或组件实例
   • 在Vue 2中通过this.$refs访问
   • 在Vue 3中通过创建ref变量并在模板中绑定来实现
3. 迁移策略：
   • 创建对应的ref变量
   • 在模板中使用:ref绑定
   • 在组件挂载后通过.value访问实际元素或组件

这种方式不仅符合Vue 3的组合式API设计理念，还提供了更好的类型推断支持，特别是在使用TypeScript的项目中。

​