Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

前言

本笔记主要基于官方文档《迁移策略—— v-for 中的 Ref 数组》汇总而来。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

Vue 2.x v-for 中的 Ref 数组的问题

在 Vue 2 中，在 v-for 语句中使用ref属性时，会生成refs数组插入$refs属性中。

如下：

<div v-for="item in 5" :key="item" :ref="item">
  {{ item }}
</div>

$refs的结果如下：

由于当存在嵌套的v-for时，这种处理方式会变得复杂且低效。

<div v-for="item in 5" :key="item" :ref="item">
  <div v-for="y in 5" :key="y" :ref="y">
    {{ item }} - {{ y }}
  </div>
</div>

$refs的结果如下：

Vue 3.x 的优化

因此，在 Vue 3，在 v-for 语句中使用ref属性 将不再会自动在$refs中创建数组。而是，将 ref 绑定到一个 function 中，在 function 中可以灵活处理ref。

如下：

<template>
	<div>
		<h1>v-for Array Refs</h1>
		<div>
			<div v-for="item in 5" :key="item" :ref="setItemRef">
				 {{ item }}
			</div>
			<button @click="print">打印 $refs</button>
		</div>
	</div>
</template>
<script>
export default {
	name: 'VforArrayRefs',
	data() {
		return {
			itemRefs: []
		};
	},
	methods: {
		setItemRef(el) {
			this.itemRefs.push(el);
		},
		print() {
			console.log('打印 $refs：');
      console.log(this.$refs);
			console.log('打印 itemRefs');
      console.log(this.itemRefs);
		}
	}
};
</script>

结果如下：

注意：

• itemRefs不强制要求是数组，也可以是对象；
• 如有必要，itemRef 也可以是响应式的且可以被监听。（这点很好理解，因为itemRefs是data属性）

---

本系列目录

• Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

• Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件

• Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

• Vue 3 迁移策略笔记——第4节：$attrs 包括class&style

• Vue 3 迁移策略笔记—— 第5节：移除 $children

• Vue 3 迁移策略笔记—— 第6节：自定义指令

• Vue 3 迁移策略笔记—— 第7节：自定义元素交互

• Vue 3 迁移策略笔记—— 第8节：Data 选项

• Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

• Vue 3 迁移策略笔记—— 第10节：事件 API

• Vue 3 迁移策略笔记—— 第11节：移除过滤器

• Vue 3 迁移策略笔记—— 第12节：片段

• Vue 3 迁移策略笔记—— 第13节：函数式组件

• Vue 3 迁移策略笔记—— 第14节：全局 API

• Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking

• Vue 3 迁移策略笔记—— 第16节：Inline Template 属性

• Vue 3 迁移策略笔记—— 第17节：Key 属性

• Vue 3 迁移策略笔记—— 第18节：按键修饰符

• Vue 3 迁移策略笔记—— 第19节：移除 $listeners

• Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this

• Vue 3 迁移策略笔记—— 第21节：渲染函数 API

• Vue 3 迁移策略笔记—— 第22节：Slots 的统一

• Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化

• Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

• Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除

• Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化

• Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

• Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

• Vue 3 迁移策略笔记—— 第29节：数组的监听