vue2 中 ref 的使用

ref 是什么ref 被用来给DOM元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。获得了引用信息，那么我们就可以操作元素或者组件了。为什么使用 ref通过定义我们知道了ref的作用注册引用，并通过$refs去获取该引用的DOM元素而且我们知道js中也有对应的api来获取

_龙衣

9498人浏览 · 2021-11-14 22:41:50

_龙衣 · 2021-11-14 22:41:50 发布

ref 是什么

ref 被用来给DOM元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
如果用在子组件上，引用就指向组件实例。

获得了引用信息，那么我们就可以操作元素或者组件了。

为什么使用 ref

通过定义我们知道了ref的作用注册引用，并通过$refs去获取该引用的DOM元素
而且我们知道js中也有对应的api来获取元素，比如document.getElementById('id名称')，

那么这二者的区别是什么呢？

查了网上的说法是

$refs相对document.getElementById的方法，能减少获取DOM节点的消耗。
我们知道vue实现了虚拟DOM，具体底层如何实现，目前还没精力和能力去研究，后续会深入了解vue源码

也就是说在vue中要是操作DOM 元素推荐使用$refs 这种方式，可以提高性能。

还有一点需要注意，ref 是在页面渲染完成后才被创建的，
我们可以在vue 的 mounted这个钩子函数中获取实例，因为在该函数页面已经被渲染完成。

ref 和 refs 的关系

this.$refs 返回了一个对象，包含当前页面的所有 ref引用名称
ref 用于定义引用名称

怎么使用

比如下面的伪代码：

完整代码示例：vue2 中 ref 和 refs 的使用示例

<div id="app">
	<a ref="a" href="http://www.w3school.com.cn">设置 DOM 元素的 ref</a>
	<HelloWorld ref="helloWorld" msg="Hello Vue in CodeSandbox!" />
</div>

methods: {
    init() {
      console.log("子组件:", this.$refs.helloWorld);
      this.$refs.a.href = "www.baidu.com";
      console.log("通过 ref 修改 DOM 元素:", this.$refs.a);
      this.$refs.helloWorld.printHello();
    },
  },

输出结果是：

子组件: VueComponent {_uid: 108, _isVue: true, $options: Object, _renderProxy: VueComponent, _self: VueComponent…}
通过 ref 修改 DOM 元素: <a href="www.baidu.com">设置 DOM 元素的 ref</a>

通过refs获得子组件并调用组件的方法