Vue 3.0 v-for中的Ref数组用法小结
更新时间：2023年12月08日 11:37:19 作者：鋜斗
在 Vue 2 中,在 v-for 里使用的 ref attribute会用ref 数组填充相应的 $refs property,本文给大家介绍Vue 3.0 v-for中的Ref数组的相关知识,感兴趣的朋友一起看看吧
介绍
在 Vue 2 中，在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的v-for时，这种行为会变得不明确且效率低下。
在 Vue 3 中，这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref，请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)：
<div v-for="item in list" :ref="setItemRef"></div>
结合选项式 API:
export default {
data() {
return {
itemRefs: []
}
},
methods: {
setItemRef(el) {
this.itemRefs.push(el)
}
},
beforeUpdate() {
this.itemRefs = []
},
updated() {
console.log(this.itemRefs)
}
}结合组合式 API:
import { ref, onBeforeUpdate, onUpdated } from 'vue'
export default {
setup() {
let itemRefs = []
const setItemRef = el => {
itemRefs.push(el)
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
itemRefs,
setItemRef
}
}
}注意：
- itemRefs 不必是数组：它也可以是一个对象，其 ref 会通过迭代的 key 被设置。
- 如果需要，itemRef 也可以是响应式的且可以被监听。
到此这篇关于Vue 3.0 v-for中的Ref数组的文章就介绍到这了,更多相关Vue 3.0 v-for Ref数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
文章详细分析了Vue项目中静态资源路径失效的问题,包括开发、构建、部署等阶段的常见原因,并提供了多种解决方案,旨在帮助开发者系统性地解决静态资源路径问题,构建稳定可靠的前端应用,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了vue动态绘制四分之三圆环图效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
vue-cli 自定义指令directive 添加验证滑块示例
本篇文章主要介绍了vue-cli 自定义指令directive 添加验证滑块示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了vue如何实现点击空白区域关闭弹窗问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue-pdf打包后无法预览问题及修复方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue 如何处理防止按钮重复点击问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Vue Router修改query参数url参数没有变化问题及解决
这篇文章主要介绍了Vue Router修改query参数url参数没有变化问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
<Teleport> 是 Vue 3 中引入的一个内置组件,用于将组件的内容渲染到 DOM 中的指定位置,而不受组件层级结构的限制,本文给大家介绍了Vue3使用Teleport解决组件间css层级问题的最佳实践,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了vue中defineProperty和Proxy的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
编译优化指的是编译器将模板编译为渲染函数的过程中，尽可能多的提取关键信息，并以此指导生成最优代码的过程，优化的方向主要是区分动态内容和静态内容，并针对不同的内容采用不同的优化策略2023-01-01
最新评论