在Vue中，ref是一个特殊的属性，用于获取组件实例或DOM元素的引用。通过在标签上添加ref属性，可以在Vue组件内部使用该元素或组件。

1、获取DOM元素的引用：

在普通HTML元素上使用ref可以获取该元素的引用。比如，在以下代码中，我们给一个input元素添加了ref属性，并在Vue组件内部使用它：

<template>
  <div>
    <input type="text" ref="myInput">
  </div>
</template>

<script>
export default {
  mounted() {
    // 使用this.$refs获取DOM元素的引用
    this.$refs.myInput.focus();
  }
}
</script>

通过this.$refs.myInput获取该元素的引用，并调用focus方法使其聚焦。

2、获取子组件的引用：

在Vue组件中使用ref可以获取子组件的引用，从而可以在父组件内部调用子组件的方法或访问其数据。

<template>
  <div>
    <child ref="myChild"></child>
  </div>
</template>

<script>
import Child from './Child.vue';
export default {
  components: { Child },
  mounted() {
    // 使用this.$refs获取子组件的引用
    this.$refs.myChild.sayHello();
  }
}
</script>

在父组件中将子组件引入，并在子组件标签上添加ref属性，然后就可以通过this.$refs.myChild获取子组件的引用，在父组件内部调用子组件的sayHello方法。

3、动态添加/移除ref：

在Vue中，ref也可以动态添加/移除。在以下代码中，我们使用v-for指令循环渲染一个input元素数组，并为每个元素添加一个ref，然后点击按钮时，移除第二个input元素的ref。

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input type="text" :ref="'myInput' + index">
    </div>
    <button @click="removeRef">移除Ref</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['A', 'B', 'C']
    }
  },
  methods: {
    removeRef() {
      // 移除第二个input元素的ref
      this.$refs['myInput1'].forEach(elem => elem.removeAttribute('ref'));
    }
  }
}
</script>

通过$refs[‘myInput’ + index]动态添加ref，再通过removeAttribute方法移除第二个input元素的ref。