Vue3中 ref 属性详解

最新推荐文章于 2025-04-11 00:36:35 发布

明天也要努力

最新推荐文章于 2025-04-11 00:36:35 发布

阅读量4.5w

点赞数 28

分类专栏： Vue 3.x 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/ZYS10000/article/details/125679946

版权

Vue 3.x 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vue2和Vue3中ref属性的不同用法。在Vue2中，ref用于直接操作DOM或组件，可以通过this.$refs访问。在Vue3中，ref不再直接挂载在实例上，而是需要借助ref函数和onMounted生命周期钩子来获取元素。对于v-for遍历的情况，Vue2中可以通过this.$refs批量操作，而在Vue3中需要动态绑定ref并收集元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Vue2 中的 ref 属性

<template>
  <div class="wrap">
    <div ref="box">box</div>
    <ul>
      <li v-for="i in 4" :key="i" ref="li">第{{i}}项</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods:{
    getDom(){
      const boxText = this.$refs.box.innerHTML;
      console.log(boxText);
      const lis = this.$refs.li;
      console.log(lis,lis[1].innerHTML)
    },
  },
  mounted(){
    this.getDom();
  },
}
</script>

在这里插入图片描述
总结：

Vue2中可以通过 ref 直接操作单个 DOM和组件，如： this.$refs.box；
Vue2中可以批量通过 ref 操作 DOM 和组件，如： this.$refs.li[0]；

2. Vue3 中的 ref 属性

在 Vue3 中没有 $refs，因此 Vue3 中通过 ref 属性获取元素就不能按照 vue2 的方式来获取。Vue3 需要借助生命周期方法，因为在 setup 执行时，template 中的元素还没挂载到页面上，所以必须在 mounted 之后才能获取到元素。

操作单个 DOM 或者组件

<template>
  <div ref="box">box</div>
</template>

<script>
import { onMounted, ref } from 'vue';
export default {
  setup(){
     // 1. 先定义一个空的响应式数据( ref 定义的)
    // 2 setup中返回定义的数据，需要获取哪个 dom 元素，就在对应元素上使用 ref 属性绑定该数据即可。
    const box = ref(null);
    const getDom = () => {
      console.log(box.value)
    };
    
    onMounted(() => {
      getDom();
    });
    
    return {
      box
    } 
  }
}
</script>

在这里插入图片描述

总结： 先申明 ref 响应式数据，再返回给模版使用，模板中通过 ref 绑定数据；

获取 v-for 遍历的 DOM 或者组件

<template>
  <ul>
    <li 
      v-for="item in cityList" 
      :key="item.id" 
      :ref="getDom">
      {{item.city}}
    </li>
  </ul>
</template>

<script>
import { onMounted, reactive} from 'vue';
export default {
  setup(){
    const cityList = reactive([
      { city:'武汉', id: '027'},
      { city:'南京', id: '025'},
      { city:'重庆', id: '023'},
    ]);
    // 1.定义一个空数组，接收所有的dom
    const lis = [];
    // 2. 定义一个函数，往空数组push dom
    const getDom = (el) => {
      lis.push(el);
    }
    onMounted(() => {
      console.log(lis,lis[0])
    })
    return {
      cityList,
      getDom,
    } 
  }
}
</script>

在这里插入图片描述

总结： 先定义一个空数组，再定义一个函数获取元素，并把该函数绑定到 ref 上（必须动态绑定），最后在函数中可以通过参数得到单个元素，这个元素一般可以放到数组中。

补充： 有一个边界问题，组件更新的时候会重复的设置 dom 元素给数组：

// ref 获取 v-for 遍历的DOM元素，需要在组件更新的时候重置接受dom元素的数组。
onBeforeUpdate(()=>{
  list = []
})