vue3.0中使用ref获取dom元素

前言：

       我们在vue2.0中使用ref是比较轻松的，但是3.0的方法是有改动

vue3.0官方入口

目录：

vue2.0中：

1、页面上定义：

2、拿dom：

vue3.0中：

1、使用场景-echarts图中用ref获取dom

2、使用场景-初始化直接获取ref的元素

打印结果：

---

vue2.0中：

1、页面上定义：

<div ref='abc'><div>

2、拿dom：

this.$refs.abc

vue3.0中：

1、使用场景-echarts图中用ref获取dom

<div ref='echart'><div>

import { onMounted,toRefs, ref,reactive } from 'vue';

 setup(){
    //1、定义
    let state = reactive({
      echart: ref(),
    })
     const echartInit = () =>{
        //2、在方法中使用
      var myChart = echarts.init(state.echart);
        ...
    }
    return {
        //3、发送出来
      ...toRefs(state),
    };

}

2、使用场景-初始化直接获取ref的元素

<div ref="box">
   I am div
</div>

import { onMounted, ref} from 'vue';
setup(){
    let box = ref(null)
    //挂载
    onMounted(()=>{
      console.log('box.value', box.value)
    })

    return {
      box
    }
}

打印结果：