[Vue 牛刀小试]：第十一章 - Vue 中 ref 的使用

 1、前言

　　在以前的前端开发中，为了实现咱们的需求，一般采用的方案是经过 JS/Jquery 直接操纵页面的 DOM 元素，得益于 Jquery 对于 DOM 元素优异的操做能力，咱们能够很轻易的对获取到的 DOM 元素进行操做。可是，当咱们开始在前端项目中使用 Vue 这类的 MVVM 框架以后，对于 DOM 的操做咱们就应当彻底的交给框架，而咱们只须要关注于数据。难道，在 Vue 中就不能手动获取到页面上的 DOM 元素了吗，答案固然是能够手动获取到 DOM 元素的，在 Vue 中咱们能够经过使用 ref 实现获取 DOM 元素的功能，固然，这也只是 ref 其中一项的功能。本章，咱们就来学习 Vue 中 ref 的相关使用。

　　学习系列目录地址：http://www.javashuo.com/article/p-bzzucmub-ba.html

　　仓储地址：https://github.com/Lanesra712/VueTrial/blob/master/chapter02-bronze/ref.html

 2、干货合集

　　ref 在 Vue 中是用来给元素或是子组件注册引用信息到父组件或是 Vue 实例上，注册后的引用信息都会呈如今父组件/Vue 实例的 $.refs 上，这时，咱们就能够经过 $.refs 获取到引用的 DOM 对象或是子组件信息。

　　例如，咱们能够获取到页面上添加了 ref 的 input 输入框的值，对于子组件来讲，咱们能够直接获取到子组件 data 选项中的数据，或是直接调用子组件的方法。

　　一、虚拟 DOM

　　在咱们使用 JS/Jquery 直接对 DOM 元素进行操做时，不论是对元素样式的修改（背景颜色从红色变成蓝色）仍是对页面中的某些布局进行动态调整（经过点击按钮在列表中添加一行新的数据），这都会形成页面的从新渲染，从而影响咱们网站的性能。而在 Vue 中，经过在内存中生成与真实 DOM 与之对应的数据结构（虚拟 DOM），当页面发生变化时，经过新的虚拟 DOM 树与旧的虚拟 DOM 树进行比对，就能很快的找出差别点，从而得出应施加到真实 DOM 上的改动。

　　二、使用 ref 获取页面 DOM 元素

　　在使用 JS/Jquery 获取页面的 DOM 元素时，咱们通常是根据 id、class、标签、属性等其它标识来获取到页面上的 DOM 元素。嗯，能够说，咱们很难抛弃 Jquery 的一个重大缘由，就是当咱们须要获取到页面上的 DOM 元素时，使用 Jquery 的 API 相比于原生的 JS 代码，简单到极致，有木有。

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

　　那么，难道咱们在 Vue 中获取 DOM 元素仍是采用这样的方式？

　　答案固然是否认的，这种直接操纵 DOM 元素的方式，与咱们使用 Vue 的初衷不符，虽然能达成效果，可是却不提倡，这里咱们就可使用 ref 来获取页面上的 DOM 元素。

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

<div id="app">
    <input type="text" ref="msgText" v-model="msg" />
    <button @click="getElement">获取元素值</button>
</div>

<script>
    var vm = new Vue({ el: "#app", data: { msg: 'Hello ref' }, beforeMount() { console.log('beforeMount: ' + this.$refs.msgText.value) }, mounted() { console.log('mounted: ' + this.$refs.msgText.value) }, methods: { getElement() { console.log(this.$refs.msgText.value) } } }); </script>

　　运行代码，从结果中能够看到，在 beforeMount 这个钩子函数中，咱们是没法获取到这个 DOM 元素的值，结合以前学习的 Vue 生命周期的相关知识，当执行到 beforeMount 钩子函数时，Vue 虽然已经将模板编译完成，可是还没有挂载到页面 DOM 元素上，所以咱们能够得出 ref 是在页面渲染完成后才被建立的。

　　能够看到，当咱们在 input 输入框中添加了 ref 属性后，在当前的 Vue 实例的 $.refs 上就挂载了当前的 input 框对象。

　　三、使用 ref 获取子组件对象

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

<div id="app">
    <input type="text" ref="msgText" v-model="msg" />
    <button @click="getElement">获取元素值</button>

    <hr>

    <child ref="childComponent"></child>
</div>

<template id="child">
    <div>
        <input type="datetime" name="datetime" v-model="local">
        <button @click="getLocalData">获取当前时间</button>
    </div>
</template>

<script>
    var vm = new Vue({ el: "#app", data: { msg: 'Hello ref' }, mounted() { console.log('mounted: ' + this.$refs.msgText.value) }, methods: { getElement() { console.log('input 输入框的值为：' + this.$refs.msgText.value) this.$refs.childComponent.getLocalData() console.log('子组件 input 输入框的值为：' + this.$refs.childComponent.local) } }, components: { 'child': { template: '#child', data() { return { local: '' } }, methods: { getLocalData() { var date = new Date() this.local = date.toLocaleString() } }, } } }); </script>

　　能够看到，当咱们将 ref 添加到子组件上，咱们就能够在 Vue 实例上获取到这个注册的组件引用，同注册的 DOM 元素同样，咱们均可以使用添加的 ref 属性值做为 key 获取到注册的对象。此时，咱们就能够获取到这个子组件上的 data 选项和 methods 选项。

 3、总结

　　由于 Vue 采用 Virtual DOM 的作法渲染网页，若是咱们直接操做 DOM，很容易产生实际网页跟 Vue 产生的 Virtual DOM 不一样步的问题，而经过使用 ref 属性以后，在一些须要获取 DOM 元素的状况下，咱们就能够很方便的获取 DOM 元素。固然，当咱们决定在项目中使用 Vue，仍是须要转变咱们的思路，将操做 DOM 转变成操做数据。一样的，经过将 ref 属性添加到子组件上，咱们就能够很轻松的获取到子组件的相关信息，这无疑给父组件获取子组件数据、调用子组件的方法提供了一种新的思路。

 4、参考

　　一、网页性能管理详解

　　二、重排重绘，看这一篇就够了

　　三、Vue做者尤雨溪：Vue 2.0，渐进式前端解决方案

　　四、vue中的 ref 和 $refs

原文出处：https://www.cnblogs.com/danvic712/p/10787366.html