（十一）template和ref获取元素或组件实例

这一节将介绍到的是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：一切你认为的困难，都是你的欲望和不自信在作祟。