什么时候用ref，什么时候不用ref

用ref

“打在我身，疼在她心”时，用ref。比如，点击事件绑定在某个标签上，事件处理函数中却要访问另一个完全不相关的元素的真实DOM。
本例中，click事件绑定在button标签上，事件处理函数handleClick中却要访问h2元素中的内容。

<template>
  <div>
    <h2 ref="title">{{msg}}</h2>
    <button @click="handleClick">点击获取信息</button>
  </div>
</template>

<script>
export default {
  name:"MyComponent",
  data(){
    return {
      msg:"好好学习，天天向上"
    }
  },
  methods:{
    handleClick(){
      console.log(this.$refs.title);
      console.log(this.$refs.title.innerText);
    }
  }
}
</script>

不用ref

“打在我身，疼在我身”时，虽然ref也可以使用，但没有必要，推荐使用event.target。比如，点击事件绑定在某个标签上，事件处理函数中需要访问本元素所在DOM。
本例中，click事件绑定在h2标签上，事件处理函数handleClick中需要访问h2自身的内容。

• 用ref

<template>
  <div>
    <h2 ref="title" @click="handleClick">{{msg}}</h2>
  </div>
</template>

<script>
export default {
  name:"MyComponent",
  data(){
    return {
      msg:"好好学习，天天向上"
    }
  },
  methods:{
    handleClick(){
      console.log(this.$refs.title);
      console.log(this.$refs.title.innerText);
    }
  }
}
</script>

• 不用ref，用event.target（推荐）

<template>
  <div>
    <h2 @click="handleClick">{{msg}}</h2>
  </div>
</template>

<script>
export default {
  name:"MyComponent",
  data(){
    return {
      msg:"好好学习，天天向上"
    }
  },
  methods:{
    handleClick(event){
      console.log(event.target);
      console.log(event.target.innerText);
    }
  }
}
</script>