Vue中ref的作用？？？

为什么出现ref

在没有学习Vue之前，我们实现直接操作页面上的DOM元素都是通过JS/jQuery，因为jQuery对DOM元素的操作非常的方便 但是学习了vue之后 就比jquery更方便

所以它的作用是什么呢？

• 使用ref获取页面DOM元素
• ’使用 ref获取子组件对象

ref使用原理

ref在Vue中是用来给元素或是子组件注册引用信息到父组件或是 Vue实例上，注册后的引用信息都会呈现在父组件/Vue实例的 ( . r e f s ) 上 ， 这 时 ， 我 们 就 可 以 通 过 ( .refs) 上，这时，我们就可以通过( .refs)上，这时，我们就可以通过(.refs) 获取到引用的 DOM 对象或是子组件信息。

那我们应该怎么使用呢？(获取dom元素)

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

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

js代码

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

运行代码，从结果中可以看到，在beforeMount 这个钩子函数中，我们是无法获取到这个DOM 元素的值，结合之前学习的 Vue 生命周期的相关知识，当执行到beforeMount 钩子函数时，Vue虽然已经将模板编译完成，但是尚未挂载到页面 DOM 元素上，还只是挂载在虚拟DOM上，因此我们可以得出 ref是在页面渲染完成后才被创建的。