1.被用来给元素或子组件注册引用信息（id的替代者）

通过document.getElementById可以获取真实DOM元素

vue中可以通过ref属性来实现

效果都一样，效果图如下：

2.应用在html标签上获取的是真实DOM元素，应用在组件标签实例对象（vc）

给html标签加ref,都能获取到真实DOM元素

而组件标签用ref，获取到的是school组件实例对象vc(Vuecompotent)

如果通过document.getElementById，来获取组件标签，得到的就是一个完整的DOM结构

总结

子组件Myschool的代码如下


<template>
  <div class="demo">
    <h1>学校名称：{{ name }}</h1>
    <h1>学校地址：{{ address }}</h1>
  </div>
  <!-- 组件结构 -->
</template>

<script>
// 组件交互相关的代码(数据、方法等等)
export default {
  name: "MySchool",
  data() {
    return {
      name: "掘金学校",
      address: "中国",
    };
  }
};
</script>

<style>
/* 组件样式 */
.demo {
  color: aqua;
  background: wheat;
}
</style>

app.js的代码如下：


<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDom">点我输出上方的DOM元素</button>
    <School id="sch" />
  </div>
</template>

<script>
// 引入组件
import School from "./components/MySchool";
export default {
  name: "App",
  components: { School },
  data() {
    return {
      msg: "hello world",
    };
  },
  methods: {
    showDom() {
      // console.log(this.$refs.sch);
      console.log(document.getElementById('sch'));
    },
  },
};
</script>