这一节将介绍到的是Vue3.x中我们如何通过ref获取元素节点或者组件实例
1、概述：通过ref获取模板元素节点
2、使用：由vue提供，按需引入：import { ref } from 'vue';
3、回顾：options API中是：this.refs.refDiv(获取某个元素节点)
3、用例：
- 在组件或节点中定义ref属性：add(ref="refAdd")或div(ref="refDiv")
- 在setup中定义对应ref属性值相同的变量名，赋值为任意值即可
- 访问方式为：refAdd.value或refDiv.value
<template>
<div ref="divBox">content</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const divBox= ref(null); // <div ref="divBox">content</div>
const user= ref(null); // user.value --> null
return { divBox };
};
};
</script>
4、注意：①：元素节点对应ref的分配只会在render时进行对比赋值，因此若在setup中未将对应的响应式变量return出来，则不会获取到组件实例或元素节点。②：在满足①的前提下，只要在定义变量时变量名称与当前组件中ref属性值相同，则该变量会被统一赋值为组件实例或者元素节点，与定义变量时的赋值无关。
5、扩展（RFC.5版本没有此功能）：因我们还在setup的context中访问到refs对象，所以获取组件实例或者元素节点的方式还可以是：
<template>
<div ref="divBox">content</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup(props, { refs }) {
const divBox= refs.divBox;
return { divBox };
};
};
</script>
下一章：（十二）Vue3.x中重写的v-model
上一章：（十）provide和inject
ps：一切你认为的困难，都是你的欲望和不自信在作祟。
