vue3 和vue2 使用ref操作dom、以及数组循环中的ref操作dom

vue3 在v-for中操作dom最佳实践

<template>  
<div class="rain">    
	<div 
		v-for="(item, index) in 8" 
		:key="index"  
		:ref="el => rain[index] = el"      
		:data-set=" 'data' + index" 
	 />    
	 <div ref='single'></div>  
 </div>
 </template>
 <script>
 import { defineComponent, onMounted,onBeforeUpdate,onUpdated, ref } from 'vue'
 export default defineComponent({  
 	setup() {    
 		const rain = ref([])   
  		const single = ref()    
  		onMounted(() => {      
  			console.log('single', single.value)     
  		    console.log('循环操dom', rain.value)      
   			console.log('循环操dom第一个', rain.value[0])   
    	})   
     	onBeforeUpdate(() => {    })    
     	onUpdated(() => {    })   
      return {      
      	rain,      
      	single   
      }  
     }
  })
 </script>

输出结果
注意：最佳实践 vue3使用v-for 循环时, 使用ref总会获取到的是最后的元素, 必须使用函数, 手动赋值, 不能用push, 会在更新的时候造成bug, 元素会重复

vue2操作dom

<template>  
	<div class="rain">   
 		vue2 使用ref操作dom    
	 <div      
		 v-for="(item, index) in 8"      
		 :key="index"      
		 :ref="`rain-${index}`"      
 		:data-set=" 'data' + index"    
 	 >      
      inner{{ index }}   
       </div>    
     <div ref="single" />  
     </div>
</template>
 <script>
    export default {  
        mounted () {    
        	console.log('single', this.$refs.single) 
        	console.log('循环操dom', this.$refs['rain-0'][0])  
      	}
    }
</script>

vue2中的循环将统一名字的ref, 归并在一个数组的机制导致内外循环绑定的ref都在了一起，变得不明确

<template>
  <div class="rain">
    vue2 使用ref操作dom
    <div
      v-for="(item, index) in 5"
      :key="index"
      ref="rains"
      :data-set=" 'data' + index"
    >
      out{{ index }}
      <div
        v-for="(item , index1) in 5"
        :key="index1"
        ref="rains"
        :data-set=" 'data-rains' + index"
      >
        inner{{ index1 }}
      </div>
    </div>
    <div ref="single" />
  </div>
</template>
<script>
export default {
  mounted () {
    console.log('single', this.$refs.single)
    console.log('循环操dom-rains', this.$refs.rains)
  }
}
</script>

输出结果

vue3并不会自动帮我们生成refs数组，只能得到最后一个元素的ref，想v-for 和 ref搭配需要手动去 创建变量来接受，ref 绑定一个方法

<template>
  <div class="rain">
    <div
      v-for="(item, index) in 8"
      :key="index"
      :ref="el => rain[index] = el"
      :data-set=" 'data-out' + index"
    >
    <div
       v-for="(item, index) in 8"
      :key="index"
      :ref="el => rain[index] = el"
      :data-set=" 'data-in' + index"
    >
      inner{{index1}}
    </div>
    </div>
    <div ref='single'></div>
  </div>
</template>
<script>
import { defineComponent, onMounted,onBeforeUpdate,onUpdated, ref } from 'vue'
export default defineComponent({
  setup() {
    const rain = ref([])
    const single = ref()
    onMounted(() => {
      console.log('single', single.value)
      console.log('循环操dom', rain.value)
      console.log('循环操dom第一个', rain.value[6])
    })
    onBeforeUpdate(() => {
    })
    onUpdated(() => {
    })
    return {
      rain,
      single
    }
  },
})
</script>

输出结果

vue3 和 vue2 对比操作ref：

1.在 Vue 2 中，在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。 当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。

2.在 Vue 3 中，这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref，请将 ref 绑定到 一个更灵活的函数上 (这是一个新特性)