Vue3--ref使用（解决ref无法获取dom元素的问题）

众所周知在vue2中，ref主要的作用还是便于快速的获取dom元素或组件，因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。

具体关于vue2中ref和$refs的使用，这篇文章写的十分全面：

https://www.cnblogs.com/xumqfaith/p/7743387.html

本文还是针对Vue3中ref使用进行说明，重点是模板ref的使用。

1. ref用法1：基本类型封装，使数据响应式

vue3中为了节约资源，并不是全部数据都会进行响应式监听。他允许用户进行动态监听。

因此在vue3中主要用reactive和ref进行响应数据的监听。他俩的区别在于：

①reactive中必须存放对象（json、数组等），不能存放基本数据类型

②ref则可以存放基本数据类型【注：ref本质还是reactive】

举例：

let a=reactive({a:5});

let b=ref(5);

详细使用请参考官方文档！

Vue3中文文档

2.ref用法2：模板ref，获取dom元素节点（重点）