Vue中ref的使用要点

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30652879

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yccg990118/p/11188580.html

博客介绍了Vue中Ref的两种使用场景，即用于普通DOM元素和子组件。Ref可注册引用信息到父组件的$refs对象，在不同场景下引用指向不同。v-for使用时，引用信息是数组。同时提醒，初始渲染时不能访问Ref，$refs也非响应式，不能用于模板数据绑定。

Ref有两种使用场景：

（1）ref用于普通的DOM元素上；

（2）ref用于子组件上；

Ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，如果在普通的DOM对象上使用，引用指向的就是DOM元素；如果在子组件上使用，引用指向的就是组件实例。在Vue中，通过ref可以让我们避免不必要的DOM操作，它相比于document.querySelector()要消耗更少。

当v-for用于元素或组件时，引用信息将是包含DOM节点或组件实例的数组。

注意：ref本身是作为渲染结果被创建的，在初始渲染的时候不能访问它们，它们还不存在，$refs也不是响应式的，不应该用它在模板中进行数据绑定。

转载于:https://www.cnblogs.com/yccg990118/p/11188580.html