官网上的说明

一、前言#

在之前的前端开发中，为了满足我们的需求，通常的方案是通过JS/Jquery直接操纵页面的DOM元素。得益于Jquery对DOM元素的出色操作能力，我们可以轻松操作得到的DOM元素。但是，当我们开始在前端项目中使用像Vue这样的MVVM框架时，我们应该把DOM的操作完全交给框架，我们只需要关注数据。不能在Vue手动获取页面上的DOM元素吗？答案是，您可以手动获取DOM元素。在Vue中，我们可以通过使用ref来获取DOM元素。当然，这只是ref的功能之一。在本章中，我们将学习ref在Vue中的使用。

仓库地址：https://github.com/lanes ra 712/vu etrial/blob/master/chapter 02-青铜色/ref.html

二、干货收集#

Ref在Vue中用于将元素或子组件的引用信息注册到父组件或Vue实例。注册的参考信息将显示在$。父组件/Vue实例的引用。此时，我们可以通过$.refs获取被引用的DOM对象或子组件信息。

例如，我们可以通过在页面中添加ref来获取输入输入框的值。对于子组件，我们可以直接获取子组件的数据选项中的数据，也可以直接调用子组件的方法。

1.虚拟DOM#

当我们使用JS/Jquery直接操作DOM元素时，无论是修改元素样式(背景颜色由红变蓝)还是动态调整页面上的一些布局(通过点击按钮在列表中添加新的一行数据)，都会导致页面被重新渲染，从而影响我们网站的性能。在Vue中，通过在内存中生成与真实DOM相对应的数据结构(虚拟DOM)，当页面发生变化时，通过比较新的虚拟DOM树和旧的虚拟DOM树，可以快速找出差异，从而得到应该应用于真实DOM的变化。

2.使用引用获取页面DOM元素#

在使用JS/Jquery获取页面的DOM元素时，我们通常会根据id、类、标签、属性等其他标识来获取页面上的DOM元素。嗯，可以说，我们很难抛弃Jquery的一个主要原因是，当我们需要获取页面上的DOM元素时，使用Jquery的API就像原始的JS代码一样简单。

document.getElementById('id ')。value=$('#id ')。val()

那么，我们还用这种方式在Vue中获取DOM元素吗？

答案当然是否定的。这种直接操纵DOM元素的方式与我们使用Vue的初衷是不一致的。虽然能取得效果，但不提倡。这里我们可以使用ref来获取页面上的DOM元素。

在下面的代码中，我给input添加了一个ref属性，然后我们可以在Vue实例中获得输入输入框的值。在这里，我尝试获取beforeMount和mounted Vue的生命周期钩子函数中输入输入框的值以及一个按钮的点击事件。

Div id=' app '输入类型=' text ' ref=' msg text ' v-model=' msg '/button @ click=' getelement '获取元素值/button/div脚本var VM=newvue ({el:' # app '，data: { msg: 'Hello ref' }，before mount(){ console . log(' before mount : ' this。$refs.msgText.value) }，mounted(){ console . log(' mounted : ' this。$refs.msgText.value) }，methods : { GetElement(){ console . log(this。$ refs . MSgtext . value)} })；/脚本

运行代码，我们可以从结果中看到，我们无法在hook函数beforeMount中获得这个DOM元素的值。结合之前学到的Vue生命周期的知识，在执行beforeMount的hook函数时，Vue已经编译了模板，但是还没有挂载到页面的DOM元素上，所以我们可以断定ref是在页面被渲染之后创建的。

可以看到，当我们将ref属性添加到输入输入框中时，当前的输入框对象被挂载在$上。当前Vue实例的引用。

3.使用引用获取子组件对象#

类似于使用ref获取页面的DOM元素，当我们需要获取子组件时，我们只需要在使用它们的地方添加ref属性。在下面的示例代码中，我添加了一个子组件。当我们点击Vue实例上的按钮时，我们会先调用子组件的方法，然后获取子组件的数据。

div id=' app ' inputtype=' text ' ref=' msgtext ' v-model=' msg '/button @ click=' getelement '获取元素值/button hrchildref=' child component '/child/Div template id=' child ' div输入类型=' datetime ' name=' datetime ' v-model=' local ' button @ click=' getlocaldata '获取当前时间/button/div/template script var VM=new Vue({ El : ' # app '，data: { msg:$refs.msgText.value) }，methods : { GetElement(){ console . log('输入输入框的值为：' this。$ refs.msgtext.value)这个。$ refs . child component . getlocaldata(). console . log(子组件输入输入框的值为：“this。$ refs.childcomponent.local)}}，components 3360 { ' child ' : { template 3360 ' # child '，data() { return { local: '' }，methods : { getLocalData(){ var Date=new Date(). this . local=Date . tolocalestring()} }，} })；/脚本

可以看到，当我们向一个子组件添加引用时，我们可以在Vue实例上获得注册的组件引用。像注册的DOM元素一样，我们可以使用添加的ref属性值作为关键字来获取注册的对象。此时，我们可以在这个子组件上获得数据选项和方法选项。

三.摘要#

由于Vue采用了Virtual DOM的方法来渲染网页，如果我们直接操作DOM，很容易造成实际网页与Vue生成的Virtual DOM不同步的问题。在使用ref属性后，在一些需要获取DOM元素的情况下，我们可以很容易地获取DOM元素。当然，当我们决定在项目中使用Vue时，我们仍然需要改变思维，将操作DOM转换为操作数据。同样，通过在子组件中加入ref属性，我们可以很容易地获取子组件的相关信息，这无疑为父组件获取子组件的数据，调用子组件的方法提供了一种新的途径。

以上是边肖介绍的ref在Vue中的使用，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！