vue中的ref 和$refs

<div id="app">
    <input type="text" ref="inp"/>
    <button @click="del">删除</button>
</div>

<script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.inp.value ="15"; //this.$refs.inp  减少获取dom节点的消耗
        }
    }
})
</script>

ref

ref 用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。

$refs

一般来讲，获取DOM元素，需document.querySelector（".inp"）获取这个dom节点，然后在获取inp的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定inp，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.inp  这样就可以减少获取dom节点的消耗了