浅析Vue中ref属性与getElementById的区别

在常规html标签中应用

<div id="test" ref="test">test</div>

console.log(document.getElementById('test'))
console.log(this.$refs.test)

ref与getElement获取到的内容是相同的

在组件中应用

<Test ref="testCom"/>

console.log(this.$refs.testCom)

ref获取到的是组件对象，可以调用该对象下的属性和方法

与v-for组合使用

<ul v-for="item in list" :key="item.name">
	<li ref="item">{{item.name}}</li>
</ul>

  data() {
    return{
      list:[
        {name: 1},
        {name: 2},
        {name: 3}
      ]
    }
  },
  mounted(){
    console.log(this.$refs.item)
  }

可以看到，输出的是ref所在循环中的所有元素。

官方文档

总结

• ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$ref对象上
• 如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例
• 当v-for用于元素或组件的时候，引用信息奖是包含DOM借点或组件实例的数组