template中的REF全解-- vue 篇我们在编写项目的时候，有时候为了获取某个元素或者给获取某个子组件，会用到

我们在编写项目的时候，有时候为了获取某个元素或者给获取某个子组件，会用到 REF 属性。当REF 放置到不同位置，我们获取到的内容是不同的结果，会有不同的操作。

REF 放置到真实DOM元素上

当我们给某个或者多个元素设置 ref 属性，在[mounted] 之后，我们可以通过 this.$refs 来进行获取，当组件卸载销毁 [destroyed] 后，$refs会变为undefined。
设置ref的元素，后续我们使用 this.$refs 获取到的都是真实DOM元素。
$refs 挂载在 vue的实例上，是一个对象的形式，后续ref元素的值以 key/value 的形式实现
```
<template>
    <button ref="btn"> 按钮 </button>
</template>

mounted() {
    log(this.$refs);
}
```

当我们给一个循环元素设置 ref，且值相同时，那么我们通过 $refs 拿到的是一个数组

<template>
    <div v-for="item in 5" :key="item" ref="forItem">
        <button ref="btn"> 按钮 </button>
    </div>
</template>

mounted() {
    log(this.$refs.forItem); [d1,d2,d3,d4,d5]
}

我们将ref设置到DOM元素上，目的就是为了获取DOM，然后直接操作DOM元素

REF设置到组件上

当REF 设置到组件上时候，我们可以在父组件上，通过 this.$refs获取到对应子组件的实例，进而可以获取组件的属性和方法等。
```
<template>
    <ChildComponent ref="child" />
</template>

mounted() {
    log(this.$refs.child);
}
```
我们经常些的vue 是类组件，当增加了functional,让类组件变为函数静态组件后，不存在实例的概念，此时通过ref标记的静态组件，$refs获取的值是undefined

vue3中获取DOM元素

在 VUE3中，团队将创建状态REF 和获取DOM 元素的REF 进行了合并。

import {ref, onMounted} from 'vue'
const btnEle = ref(null);
onMounted(()=>{
    log(btnEle.value)
})

<template>
    <button ref="btnEle"> 按钮 </button>
</template>

我们知道在vue3中，创建状态有多种方式，很重要的有两种：reactive 和 ref。在创建状态的时候，ref是通过原始的 defineProperty 来实现的响应式绑定。在获取DOM元素的时候，是直接去拉取真实DOM。然后开发者进行DOM操作。

vue3 ref 获取子组件

正常来讲，ref 定义到子组件中，变量[child] 应该是可以直接获取到子组件的所有内容的，包括状态、方法等等。但是很抱歉，只有个 Proxy 类，里面毛毛都看不到
```
<template>
    <ChildComponent ref="child" />
</template>

import {ref, onMounted} from 'vue'
const child = ref(null);
onMounted(()=>{
    log(child.value); // 一个空的Proxy 实例
})
```

你要想获取子组件内部的属性、方法、等内容，需要借助 子组件内编写 defineExpose 来进行暴露

<template>
    <ChildComponent ref="child" />
</template>

import {ref, onMounted} from 'vue'
const child = ref(null);
onMounted(()=>{
    log(child.value); // 获取到一个暴露出信息的 Proxy
})


/// childComponent
defineExpost({
    name: 'wj',
    age: 32,
    fn,
    ...
})

vue3中ref的具体使用，将在响应式数据中进行介绍。还在写，稍等。