vue中ref标签属性和$ref的关系解读

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

<div id="app">
        <div>
            <h2 ref="name1">这是name1节点元素</h2>
            <p ref="name2">这是name2节点元素</p>
        </div>
 </div>

 mounted() {
                console.log(this);   //vue实例对象
                console.log(this.$refs.name1);   //上面的h2标签元素
                console.log(this.$refs.name1.textContent);  //标签内容
                console.log(this.$refs.name2);  //上面的p标签元素                
            },

     <div id="app">       
        <h2 ref="name1">这是name1节点元素</h2>
        <p ref="name2">这是name2节点元素</p>
   		 <span ref="name1">这是ref的name1值重复的节点元素</span><br>
   		 <i ref="name2">这是ref的name2值重复的节点元素</i><br>
	  </div>	  

mounted() {
                console.log(this);   //vue实例对象
                console.log(this.$refs.name1);   //上面的h2标签元素
                console.log(this.$refs.name1.textContent);  //标签内容
                console.log(this.$refs.name2);  //上面的p标签元素                
            },

<ul  ref="veg">
   <li>水果1</li>
   <li>水果2</li>
   <li>水果3</li>
</ul>

console.log(this.$refs.veg);

 <div id="app">
        <ul>
            <li ref="fruits" v-for="(item,index) in arr" :key="index">水果{{item}}</li>
        </ul>
   </div>

 const app = new Vue({
            el: '#app',
            mounted() {               
                console.log(this.$refs.fruits); //打印的是li标签数组
                console.log(this.$refs.fruits[1].textContent);
            },
            data: {
                arr: [1, 2, 3, 4, 5],
            },
        });

console.log(this.$refs.fruits);

<h1 ref="xxx">...</h1>
<School ref="xxx"></School>

this.$refs.xxx