背景： 原生js获取DOM元素需要用如：document.getElementById这么长的API来获取，于是jQuery应运而生，$("#id")的使用使我们的操作变得简便起来。但是jQuery仅仅是库（插件），不能够用来搭建框架。于是vue可以帮我们解决这个问题，vue也有自带的获取DOM的方法，那就是ref。它不仅可以获取DOM元素还可以获取组件。
本质： ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive.
vue2:
一、获取DOM，操作DOM
1、给dom节点记上ref属性，可以理解为给dom节点起了个名字。
2、加上ref之后，在$refs属性中多了这个元素的引用。
3、通过vue实例的$refs属性拿到这个dom元素。
<div id="box" ref="refdiv"> haha</div>
<div id="box2" ref="refdiv2"> haha</div>
//这些元素最早可以在mounted声明函数中获得
mounted(){
this.$refs.refdiv.style.color = 'red'//修改box的字体颜色
}
二、获取组件，拿到组件中的变量和方法
1、给组件记上ref属性，可以理解为给组件起了个名字。
2、加上ref之后，在$refs属性中多了这个组件的引用。
3、通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。
<son id="son2" ref="son2"></son>
<template id="son">
<div>
son
<button @click="log1">按钮</button>
</div>
</template>
Vue.component("son",{
template:"#son",
data(){
return{
msg:"hello"
}
},
methods:{
log1(){
console.log(1);
}
}
})
data: {
sonmsg:""
},
mounted() {
this.sonmsg = this.$refs.son2.msg
//调用组件中的方法
this.$refs.son2.log1()
},
也可以通过给变量赋值的方法，展示该组件中的内容。
vue3:
在vue2中我们可以通过给元素添加ref=‘xxx’,然后在代码中通过refs.xxx的方式来获取元素,在vue3中也可以通过ref来获取元素. 但不是像以下这种熟悉的方式,因为在vue3中没有$和refs这些东西.
<template>
<div>
<div ref="box">我是div</div>
</div>
</template>
<script>
import { ref,onMounted } from "vue";
export default {
setup() {
let box = ref(null); //本质是reactive({value:null})
// 需要在生命周期获取
onMounted(()=>{
// 当界面挂载出来后就会自动执行
console.log(box.value);
})
//接受的是null,原因是setup执行时机比mounted早,dom还没形成
console.log(box.value);
return { box };
},
};
</script>
