vue中ref与getElementByID的区别

1 用在常规元素中

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

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

ref与getElement获取到的内容相同

在网上查到有描述说ref的方式相比getElement会减少获取dom节点的消耗，未证实，这里记录

---

2 用在组件中

2.1 单独使用

<Test ref="testCom"/>

console.log(this.$refs.testCom)

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

  data() {
    return{
      testdata: 'testdata'
    }
  },
  methods:{
    testfun: function(){
      console.log('testfun')
    }
  },

console.log(this.$refs.testCom.$data.testdata)
this.$refs.testCom.testfun()

2.2 与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所在循环中的所有所有元素，而不是其中一个

---

结尾

最后，贴上官方文档的描述，其实已经很清晰了，这里是为了自己实践做一个记录