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所在循環中的所有所有元素，而不是其中一個

---

結尾

最后，貼上官方文檔的描述，其實已經很清晰了，這里是為了自己實踐做一個記錄