vue中$refs的三种用法

我们都知道，在vue2中获取DOM元素，可以直接在元素上绑定ref属性，然后获取到DOM元素的属性值，这种方法在vue3 中仍然可以使用，但也会有一些问题。下面就介绍$refs的三种用法：

1、vue2中

在vue2中，我们可以直接使用ref获取元素，也就是直接在元素上绑定ref属性，在直接使用this.$refs[‘自定义属性名’] 就能直接获取。但是这样也是有一定风险的。因为ref绑定的在元素上，所以当元素没有进行渲染时，是不能通过ref获取到元素的。

<template>
  <div>
    <div ref="btn">我是一个按钮</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  created() {
    //直接使用this.$refs获取DOM元素
    console.log(this.$refs.btn); // undefined
    this.$nextTick(() => {
		console.log(this.$refs.btn)  //获取到正确元素
	})
  },
  mounted() {
	console.log(this.$refs.btn); //获取到正确元素
  }
}
</script>

需要注意的是，在于vue2中使用这种方法获取v-for的元素时，获取到的是一个数组。

<template>
  <div>
    <div ref="btn" v-for="(item , index) in 3" :key="index">我是一个按钮</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  mounted() {
    //获取到的是一个元素数组 
	console.log(this.$refs.btn); 
  }
}
</script>

2、vue3中

在一般情况下，vue2的获取元素的方法在vue3也完全适用。

但是，有时候可能会遇到无法获取这个节点，原因是生命周期的问题，在vue3中原来的created没有了，而 setup 充当了原来的 created。所以在 setup 的时候，dom元素还没有被创建，只有setup完毕了之后HTML才能构建，这时才能真正访问到value值，所以自然就无法获取到dom节点，要想解决这个问题，就要配合钩子函数 onMounted ，在dom挂载完毕后再进行获取。

<template>
	<div id="ref">
        <!--在元素上用 ref="butRef" 绑定-->
		<button type="button" ref="butRef" >按钮元素</button>
	</div>
</template>

<script>
    //引入ref
	import {ref, onMounted} from 'vue'
	export default {
		setup() {

            //需要先定义butRef
			let butRef = ref(null)
            onMounted(()=>{
              //使用的时候为 butRef.value（需要加点value获取DOM元素值）
			  console.log(butRef.value);
            })
			return {
				butRef
			}
		}
	}
</script>

3、vue3的组合API（composition-api）

最后一种方法就是从上下文 Ctx（context）中解构构出 refs，虽然这里refs可能会提示已经被弃用，但是在这里仍然是可以用的。

<template>
	<div id="ref">
		<button type="button" ref="butRef" >按钮元素</button>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from '@vue/composition-api';

export default defineComponent({
    name: '',
    components: {},
    setup (props, ctx) {
        //从Ctx（context）中解构出 refs
        const { emit, refs } = ctx;
            
        watch(filterText, (val) => {
            //在使用的时候直接用 refs.butRef
            //refs.butRef.filter(val);
            (refs.butRef as Any).filter(val);
        });
		return {
			butRef
		}
	}
}
</script>